www.stackoverflow.com<http://www.stackoverflow.com>
From: [email protected] [mailto:[email protected]] On Behalf Of Gavin Wilby Sent: Wednesday, 26 November 2014 10:19 PM To: '[email protected]' Subject: [NTSysADM] Web coders help Good morning everyone, Got a little (and utterly unimportant) project to do that I could do with a small pointer. It's basically a floor plan of the office that I want to pop up images of the staff when hovering over their desk. I have a large image. This image has been added into a html web page. I want to use image mapping to create hyperlinks on the image map hot spots - all simple enough and works well. I want to use a mouse over to display a popup image on the hotspot, and here is where it gets tricky. I have the following CSS: -- #thumbwrap { margin:75px auto; width:252px; height:252px; } .thumb { float:left; /* must be floated for same cross browser position of larger image */ position:relative; margin:3px; } .thumb img { border:1px solid #000; vertical-align:bottom; } .thumb:hover { border:0; /* IE6 needs this to show large image */ z-index:1; } .thumb span { position:absolute; visibility:hidden; } .thumb:hover span { visibility:visible; top:37px; left:37px; } -- This works as expected: <a class="thumb" href=>test<span><img src="http://server.local/images/image1.jpg";></span></a> However, I want the above to work on the hotspot, this doesn't work at all: <area shape="rect" coords="100,91,121,106" a class="thumb" href="#" <span><img src=" http://server.local/images/image1.jpg "></span></a> This however does, but doesn't give the result that I want (it creates the right link, but not as a pop up): <area shape="rect" coords="100,91,121,106" a href=" "onmouseover="parent.location='http://server.local/images/image1.jpg";</a> Any idea how I can get this to work? Gavin Wilby IT Support Engineer SMP Partners Ltd Clinch's House, Lord Street, Douglas, Isle of Man IM99 1RZ Tel +44 1624 682214 Mob +44 7624 480575 [email protected]<mailto:[email protected]> www.smppartners.com<http://www.smppartners.com/>
![http://server.local/images/image1.jpg"](http://server.local/images/image1.jpg"){kind=link}
