Image window popup, but not popup

NerdTop72 · Jun 6, 2007

I want to mouse over a thumbnailed image and display in a box, in the same page, the full sized image. Is this AJAX?
I don't know how else to explain it, other than a pop up window within the page, that is not a pop up. ha ha
on

http://www.netflix.com

they have a similar feature. If you mouse over a movie, the movie synopsis appears on the same page but in a little pop up window.
Can anyone point me in the right direction to code this on my own site?
Thanks

KDavie · Jun 6, 2007

The best approach really depends on your requirements. Where is the image being stored? Is it in a db, or is it accessible through an URL? Do you only need to display the image, or will you be pulling data from a db to display with the image (following your netflix example)?

If there are db calls involved then AJAX is the way to go. If you can just reference the image through an URL then you could just write a few simple scripts to accomplish this.

NerdTop72 · Jun 7, 2007

The image is just being stored in a directory on the server, accessable by a URL. No other information will be pulled from a database. Just an image. rescaling some images may be a factor but I can probably do that before uploading the images.

Could you direct me to the correct coding syntax for this function? What are those windows called that are opened on a webpage? I wouldnt think it would be a popup.

Im a newbie to Java BTW

Thanks!

nickdel · Jun 7, 2007

No Ajax required. Simply change the source of the image using javascript

Code:

<script language="javascript">

function ChangeImage(UseImage){

document.getElementById('BigImg').src = 'images/' + UseImage;

}

</script>

</head>

<body>

	<img id="BigImg" src="BigImage">

	<a href=# onMouseOver="ChangeImage('image1.gif');" onMouseOut="ChangeImage('image2.gif');"><img src="Thumbnail image"></a>

</body>

Untested but looks right and not much to it anyway!

Cheers

Nick

KDavie · Jun 7, 2007

nickdel's solution will work if you to just change the existing image. If you want to give the appearance that the image is "poping up" then I would recommend doing something like this:

First add this div to your page, it will serve as a container for the "pop-up":

Code:

<div id="divPlaceHolder" style="position:absolute; visibility:hidden;"></div>

Now, set up your thumbnails like this (just change the src and the BigImageUrl to the correct values):

Code:

<img src="/SomeURL" onmousemove="ShowFullImage(/BigImageURL);" onmouseout="HideFullImage();" />

now add these scripts to your page:

Code:

function ShowFullImage(imgUrl){
        var ph = document.getElementById("divPlaceHolder");
        var ev =  window.event;
        var xPos = (ev.clientX);
        var yPos = (ev.clientY);
        ph.style.top = yPos;
        ph.style.left = xPos + 15;
        ph.innerHTML = imgUrl;
        ph.style.visibility = "visible"; 
    }
function HideFullImage(){
        var ph = document.getElementById("divPlaceHolder");
        ph.innerHTML = '';
        ph.style.visibility = "hidden"; 
    }

That should work for you. I tested in IE.

A more preferred approach would be to not use the mousemove and mouseout events to fire to script. Instead you could write a mouselistener and a script to register the location of the images when the page is loaded. Then you can use the mouse listener to check if you are over an image and fire the show/hide scripts that way. It is a little more advanced, but less prone to failure.

Hope this helps.

-Kevin

NerdTop72 · Jun 19, 2007

Thanks for the replies,

I copied your code KDavie and it is not displaying the pictures. instead, on the mousemove it does hover a text in black saying this "$product.thumbnailimage" over each image... here is the part of your code i changed.

<ss:image source="$product.thumbnailImage" onmousemove=ShowFullImage("$product.thumbnailimage"); onmouseout="HideFullImage();" border="0"/>

The "$product.thumbnailimage" is a place holder for the current image.
ive tried it with the the real link to just 1 image but it does the same thing in IE, it displays /catelog/14325123_thumb.jpg when you mouse over it. I am using prostores as a shopping cart tool. thats where the <ss syntax comes in.

If you have any suggestions, thanks.

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Image window popup, but not popup

NerdTop72

Programmer

KDavie

Programmer

NerdTop72

Programmer

nickdel

Programmer

KDavie

Programmer

NerdTop72

Programmer

Similar threads

Part and Inventory Search

Sponsor