What seems like half a lifetime ago I used to know how to code HTML and CSS. Then I stopped. Now I've started again and, man, has coding changed with the advent of HTML5 and CSS3. I need some help.

I'm working on a personal project where I want to emulate the inventory and character screens of my characters on a web page – just like when we're viewing our characters and mousing over our gear and D2 shows us what the stats of our gear is. I figure an image map with popup images on hover is the way to do it.

1. You mouse over the image of an item on the image map (the "hot spot") and a pop up image showing the stats of the item appears on the screen;
2. You move your mouse off of the image and the image is gone from the screen.

Aside from keeping the popup within the boundaries of the viewport and perhaps having a smooth fade in/fade out effect for the pop up image, that's all I'm after.

Here is an example of how I envision this:



Years ago I used to be able to do exactly what I just described using JavaScript but the code I used then is now outdated.



Since this is just for me, I don't need this to be cross-browser compatible. I use Chrome and that's all this has to work in. I have an old but still reliable image edit app that will outline the image map's hot spot co-ordinates, so I'm good to go in that department.

I'd appreciate it very much if anybody can point me in the right direction of how to make this work.

This post was edited by Mysticzon on May 27 2020 06:16am

While I sincerely thank you for your interest in my question, what you have provided me with is not helpful.

I need a script or some kind of code that will produce an image popup when the mouse moves over an image map's "hot spot" coordinates.

My knowledge of JQuery is next to zero, but it looks like what you have provided me with is an image popup when the mouse moves over a text link.

Even so, because of my limited knowledge of JQuery, I don't even know where to begin to try to adapt your JQuery script to my needs.

Also, not sure if this matters to you, but you are using a broken link in line 4 of your script.

Once again, thank you very much for your interest.

https://jsfiddle.net/ergec/gse19j0b/

got it from there:
https://stackoverflow.com/questions/40497584/imagemap-on-hover-display-image

seems to be doing what you described

Java script is used for these actions,

https://www.w3schools.com/js/default.asp

<button type="button"
onclick="document.getElementById('demo').innerHTML = Date()">
Click me to display Date and Time.</button>


onclick= or onhover=

Hello and thank you for your interest in my question.

With my extremely limited knowledge of JQuery, I tried to recreate the example shown in your first link even though the example failed to do what it was intended to do: display a popup image when the mouse is moved over a "hot spot" coordinate on an image map. Nonetheless, I figured if i could recreate the example successfully, then maybe I could adapt the script to suit my own image map and images.

In Line 1 "sitebox" is undefined. Either it's a redundant tag or something really is missing that is preventing this example from working.

In Line 8 is a broken link, so I substituted it with my own image.

That having been said, here is what I came up with:



Which can be seen on my domain: https://bit.ly/3eyMDRZ

As you can see, nothing is working, and I don't possess the coding knowledge to troubleshoot or adapt this script.

I appreciate the time you took to try and help me with my project.

I believe you posted in the wrong thread. If not, then I have no idea what you are trying to accomplish but thanks for playing.

Sorry i didnt try the code before sending you a link, this seems to work for me tho.



building 1 still shows a broken img but you get the idea i guess

This post was edited by MonsieurPorc on May 31 2020 06:19am

MonsieurPorc, we are now cooking with fire !! I made a couple of small adjustments to your code:

1. Removed the class="sitebox" tag from the opening <div> as it was undefined. Doesn't seem to make a difference one way or another, so that's gone.

2. Replaced the image reference for "Building 1" "https://placeholdit.imgix.net/~text?txtsize=40&bg=ff9900&txtclr=ffffff&txt=01&w=70&h=70" and used a legit image reference.

3. Scrapped the whole aerial image and applied proper coordinates to my own image map.

Then I continued the pattern and added image popups for my zon's Titans, Griffs, Maras, Phoenix and Enigma. Since this is still in the testing stage, those are the only ones I did.

The end result can be seen here: http://theinspirationgallery.com/D2-2020/test2.html IT WORKS !!

I won't produce the code here because you can see how it all turned out by viewing the page source.

It doesn't look like much right now, but it's the closest I've come to achieving what I'm ultimately trying to do. Still have lots of things to figure out to make the popup images behave as they do in the game, but at least i've got a starting point now.

THANK YOU SO VERY, VERY MUCH for your help. Would not have made it this far without you, and I appreciate your time and consideration with my project.

I was glad to help and I'm sure you will improve this to make it fit your needs!