Inline Image Popup

[bob3940]

My web page contains a list of employees. The list contains standard information first/last name, department, etc. I want to make it so that when you hover the mouse over the employee's name it displays their picture. If you need an example of what I mean then just look at posts here on tek-tips. They automatically display adds that pop up when you hover your mouse over certain keywords. I don't want to open another window I just want a "floating" image. All of my searches bring up scripts that open a new window or are designed for viewing picture galleries.

 

[vacunita]

You'd need to set the images visibility to hidden and then alter it to visible when the hovering over the link.

Here's an example:

<style type="text/css">
.namePic{
	}
	
	.namePic img{
	visibility:hidden;
	height:64px;
	width:64px;
	vertical-align:middle;
   
	}
	.namePic:hover{
	
	}
	.namePic:hover img{
	visibility:visible;
	 border:1px solid gray;
	background-color:#FFFFFF;
	
	}
</style>
...



	<a href="#" class="namePic">Joe Smith<img src="joespic.jpg" alt="Joe's Pic"></a> <br>
	<a href="#" class="namePic">Frank Jones src="joespic.jpg" alt="Frank's Pic"></a> <br>
	<a href="#" class="namePic">Emma Pierce<img src="joespic.jpg" alt="Emma's Pic"></a> <br>
	<a href="#" class="namePic">Jane Petersen<img src="joespic.jpg" alt="Jane's Pic"></a> <br>

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Behind the Web, Tips and Tricks for Web Development.

http://behindtheweb.blogspot.com/

 

[bob3940]

Unfortunately this does not appear to do what I requested. I need to have a picture pop up at the mouse cursor when it is hovering over a user's name. I tried the example you gave me but the picture does not display.

Please look at any of the posts in Tek-Tips that have one of the advertising pop-ups (The word PICTURE in my original post brings up an ad for HP when I hover over it.)

Can anybody point me to sample code or suggest a way to do this?

 

[vacunita]

As does my example. It pops up the pic next to the name when you hover over it.

You can take a look here:
Popup on Hover
I tested this in IE, Firefox, Chrome and Safari, and it works.

In that same page is another option where the pic pops up right over the name.

Source code has everything.






----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Behind the Web, Tips and Tricks for Web Development.

http://behindtheweb.blogspot.com/