PDA

View Full Version : hover effect with CSS and JS question

thor2002
11-10-2005, 01:23 PM
Hi,

I´ve found this site, http://www.bigstockphoto.com , where visitors, if they hover over thumbnails get a larger version of the same thumbnail.
Thusfar I have:
copied all CSS styles,
copied all scripts,
even copied most images from the thumbnail maps (not all, just for one image to sample the code),
but without any success.

I tried browsing through the css, the scripts etc, but I got confused...

Can anybody help me out here (I am a fruitcake when it comes to working with scripts, css etc.....I´m more a graphics kind-of guy)

Here´s what I´ve got:
HTML:
In head:
call popup and common and categories script.
call style.css (which in turn calls two other css-styles)

In body:
<p><a id="h97759" href="bg_1.jpg"><img id="97759" onMouseOver="imgHover(this);" onMouseOut="imgCancel(this);" border="0" style=" width: 110px; height: 73px; " alt="..." src="thumb/small/97759.jpg"></a>
</p>

CSS: copied style.css, account.css and main.css (incl. maps)

JS: copied popup.js, common.js, categories.js

images: copied spacer.gif, thumbs/small/97759 etc.



What am I doing wrong???? All I get is the alt-text?!?
Can I get the same result with, say Hover??
Can anybody help me get this effect working??

Desperate Thor2002:(
brandonH
11-10-2005, 06:13 PM
the best way, if you are geting confused with their code, is to just start from scratch yourself.

gattta ask a question though....

are you wanting to replace the old image with the bigger version of the same image, or is there already a place for displaying the larger image?

i.e. you have all the thumbnails lined up and below the thumb nails is the large image. and when you mouseover the thumbnails it changes the large image.
_Aerospace_Eng_
11-10-2005, 06:21 PM
This one (http://moneytreesystems.com/css/picpopup.html) uses only CSS to do what you want I think.
thor2002
11-11-2005, 08:13 AM
@BrandonH:

Starting from scratch would (naturally) be the way, but I sortof got asked to do this on the fly...
As for the images: I would load the smaller thumbnail and preload the (somewhat) larger thumbnail. The link would then open a new window with the bigger image. :cool:

@AeroSpace Engineer: This certainly looks the part! I will try to incorporate (I just love that word!) the style in css. :thumbsup:

As for the script and styles used by bigstock, I found they use spacer.gif...Isn´t that sort of old.....? :rolleyes:

Thor2002
brandonH
11-11-2005, 05:13 PM
incase you need the script.....
the below will open a window and display the bigger version of the image in the new window. just be sure that if your thumbnails file name is "img1.gif"
you make that img's id img1, and the larger images' file name needs to be "img1_1.gif".

theis script also checks to see if the new window exists before writing to it. if it doesnt exist it opens it, and if it does exist it just changes the image.

you can adjust the window size in the window.open() part. that way the new window is just big enough to display the large image, but not so big that it covers up the first window.


{actually javascript}

<html>
<head>
</head>
<body>
<img src="img1.gif" id="img1" onmouseover="LoadNew(this.id);">
<img src="img2.gif" id="img2" onmouseover="LoadNew(this.id);">
<img src="img3.gif" id="img3" onmouseover="LoadNew(this.id);">
<img src="img4.gif" id="img4" onmouseover="LoadNew(this.id);">
<script laguage=javascript>
var newWin=null;
function LoadNew(img){
if(newWin==null || newWin.closed){
newWin=window.open("","ImgWin");
newWin.document.write("<html><body onUnload='if(opener.newWin)opener.newWin = null;'><span id='sp1'><img

src="+img+"_1.gif></span></body></html>");
}else{
newWin.document.getElementById('sp1').innerHTML="<img src="+img+"_1.gif>";
}
}


</script>

</body>

</html>