...

View Full Version : Onmouseover/Onmouseout effect help



vmcuan
06-13-2004, 07:52 AM
I found this code in the net, but I don't know where the my JPG's go. Can anyone please tell me where to put the images so that when I mouseover a thumnail jpg, I get the full size jpg hovering someplace on the screen then oumouseout the full picture goes away and the thumnail remains...?????

I think this is the correct code, but I'm not sure!!
I've tried putting the jpgs in several places in the code, but the effect still does not work.



<SCRIPT LANGUAGE="JavaSscript"><!--
function MakeAnotherWindow(imageName,imageHeight,imageWidth) {
myFloater=window.open("","myWindow","width="+imageWidth+",height="+imageHeight);
myFloater.location.href = imageName;
}
//--></SCRIPT>

<A HREF="whatever.html" onMouseOver="MakeAnotherWindow('myImage.gif',100,200)" onMouseOut="myFloater.close()">text or image here</A>


Thanks

Willy Duitt
06-13-2004, 08:46 AM
You have one too many S's here: <SCRIPT LANGUAGE="JavaSscript">

And language is deprecated.
Use type instead: <script type="text/javascript">

vmcuan
06-13-2004, 05:48 PM
Thanks Willi Duitt,


I'll fix those entries, but can you tell me where to put my two jpgs in the code???


vmcuan

Mr J
06-13-2004, 05:56 PM
Something like the following maybe?


<HTML>
<HEAD>
<TITLE>Document Title</TITLE>

<script type="text/javascript">
<!--

function show_image(pic){
document.getElementById("img_holder").src="spacer.gif" // needed for Moz
document.getElementById("img_holder").style.visibility="visible"
document.getElementById("img_holder").src=pic
}

function hide_image(){
document.getElementById("img_holder").style.visibility="hidden"
}
// -->
</script>

</HEAD>
<BODY>

<img id="img_holder"src="" style="position:absolute;left:150px;top:80px;visibility:hidden">
<P>
<img src="pic01_tn.jpg" width="25" height="25" onmouseover="show_image('pic01.jpg')" onmouseout="hide_image()">
<img src="pic02_tn.jpg" width="25" height="25" onmouseover="show_image('pic02.jpg')" onmouseout="hide_image()">
<img src="pic03_tn.jpg" width="25" height="25" onmouseover="show_image('pic03.jpg')" onmouseout="hide_image()">



</BODY>
</HTML>

vmcuan
06-13-2004, 06:15 PM
Hey Mr. J.

Thanks for the code.

I noticed you have room for up to 3 jpgs.
Which is confusing since I only need two.
I realize that I can remove one of them but
I still dont know where to put my two jpgs
even if I remove the entry for the 3rd jpg.

My jpg images are called car1 and car2. Car1 is the thumbnail and Car2 is the blown up jpg so when when someone goes over car1 with the mouse (onmouseover), the blown up image -Car2- comes up. Then when the mouse is removed from the thumbnail (onmouseout), the blown up image -Car2- disappears...

I just need to know where to put each of my 2 jpgs.



Thanks

Basscyst
06-13-2004, 06:51 PM
Hello,

See where the code said pic01.jpg & pic01_tn.jpg?? That's where you want to put your JPG's. You can remove \ add one without harm.

Modified to suit your needs:


<HTML>
<HEAD>
<TITLE>Document Title</TITLE>

<script type="text/javascript">
<!--

function show_image(pic){
document.getElementById("img_holder").src="spacer.gif" // needed for Moz
document.getElementById("img_holder").style.visibility="visible"
document.getElementById("img_holder").src=pic
}

function hide_image(){
document.getElementById("img_holder").style.visibility="hidden"
}
// -->
</script>

</HEAD>
<BODY>

<img id="img_holder"src="" style="position:absolute;left:150px;top:80px;visibility:h idden">
<P>
<img src="car1.jpg" width="25" height="25" onmouseover="show_image('car2.jpg')" onmouseout="hide_image()">
</BODY>
</HTML>


Basscyst

vmcuan
06-13-2004, 08:05 PM
The help you've given me today, was exactly what I was looking for.
Since I don't know anything about JS, I was trying to figure this out for about a week until today.

Thanks a billion


Victor

Mr J
06-13-2004, 08:52 PM
For just a single mouseover you could go


<IMG src="car1.jpg" border=0 alt="A Simple Mouseover" onmouseover="this.src = 'car2.jpg';" onmouseout="this.src = 'car1.jpg';">

vmcuan
06-13-2004, 09:09 PM
Thank you very much for all your help...


Victor.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum