PDA

Click to See Complete Forum and Search --> : image rollover..onmouseover

HTMLmaniac
04-21-2003, 05:31 PM
i am doing an image rollover in dreamweaver and im trying to get something like this:

http://www.geocities.com/Rockluv3r/ok.htm

im having trouble though....cuz i need to know how to make it so that when you hold your mouse over one of the Final Fantasy Images..it shows a picture in the middle..and then when you take the pointer off the final fantasy image..it goes blank...and then when you hold your mouse over another..it shows ANOTHER different picture in the middle...and so on and so on..can anyone help me out?
Jona
04-21-2003, 05:42 PM
Try something like this:

<html><head>
<script>
function changeCenterImage(img){document.images['centerImage'].src=img;}
function clearCenterImage(){document.images['centerImage'].src="";}
</script>
</head><body>
<table align="left">
<tr><td><img src="image_one.gif" onmouseover="changeCenterImage('your_image.gif')" onmouseout="clearCenterImage()"></td></tr>
<tr><td><img src="image_two.gif" onmosueover="changeCenterImage('your_second_image.gif')" onmouseout="clearCenterImage()"></td></tr>
</table>
<table align="center">
<tr><td><img src="center_image.gif" name="centerImage"></td></tr>
</table>
</body></html>
Jona
04-21-2003, 05:44 PM
By the way, that doesn't preload the image. If you want to preload, just tell me...
DrDaMour
04-21-2003, 05:46 PM
that's a little too complicated for what you need i think

this will get you start, mouse over the first image changes second image from URL2 to URL3 and back
<html>

<script>
//this is for preloading the images into cache, so they dont'
//redownload

a = new Image();
a.src = "URL2";
b = new Image();
b.src = "URL3"
</script>

<body>

<img src="URL1" onmouseover="changing.src = b.src" onmouseout="changing.src = a.src">
<br>
<img id="changing" src="URL2">

</body>

</html>

just keep cloning the first image line, with differnet URLS and ever mouse over will do teh same thing to teh second image
HTMLmaniac
04-21-2003, 05:46 PM
ye preload please! lol...and by the way..how do i do that for multiple images...cuz obviously u can see what i want to do..and i just need to know how to do it in dreamweaver :) Thanks
Jona
04-21-2003, 05:49 PM
I don't know how to do it in Dreamweaver. I only know HTML and Javascript, buddy. I don't have Dreamweaver... All I can do is post the code.
HTMLmaniac
04-21-2003, 05:52 PM
sorry....yes please post the code...and post the full one that will help me for multiple images on rollover or whatever...cuz i never know what to do after the first example is given to me..
DrDaMour
04-21-2003, 05:53 PM
you copy and paste it, then play with it till it suits your needs


Jona-you've fed this man for a day.....
Jona
04-21-2003, 05:56 PM
<html><head>
<script>
center_image1 = new Image();
center_image1.src = "your_file1.gif";
center_image2 = new Image();
center_image2.src = "your_file2.gif";
center_image3 = new Image();
center_image3.src = "your_file3.gif";
function changeCenterImage(img){
document.images['centerImage'].src=img;}
function clearCenterImage(){document.images['centerImage'].src="default_image.gif";}
</script>
</head><body>
<table align="left">
<tr><td><img src="image_one.gif" onmouseover="changeCenterImage(center_image1.src)" onmouseout="clearCenterImage()"></td></tr>
<tr><td><img src="image_two.gif" onmosueover="changeCenterImage(center_image2.src)" onmouseout="clearCenterImage()"></td></tr>
</table>
<table align="center">
<tr><td><img src="center_image.gif" name="centerImage"></td></tr>
</table>
</body></html>


Are the images themselves also rollovers?
HTMLmaniac
04-21-2003, 06:00 PM
no im pretty sure their not but thank u so much..ill check and make sure it works right now THANK U!
Jona
04-21-2003, 08:55 PM
Tell me if you need more help. :)
HTMLmaniac
04-22-2003, 02:16 PM
sorry dude...im still havin trouble with it and i have NO IDEA WHY ahhhhhhhhhh please help me out..just view the source at this web site

http://www.geocities.com/Rockluv3r/ok.htm

just help me out with what picture goes where..cuz im soooo confused! lol i keep doing it and its just being weird... but thank u so much again for your cooperation in dealing with my stupidity
Jona
04-22-2003, 02:43 PM
Try changing this function:

function clearCenterImage(){document.images['centerImage'].src="http://www.geocities.com/Rockluv3r/ff6logo.jpg";}

And make sure all of your images are there and lead to the right place.
HTMLmaniac
04-22-2003, 09:19 PM
thank you soooooo much for helpin me out.. i finally figured it out and i only had one more minor question im pretty sure u can answer...for the page i did.... how do i change the height/width of the pictures which appear when a mouse is held over one of the final fantasy images? again heres the link:

http://www.geocities.com/rockluv3r/ok.htm

thank u again!

ps. how do u add a borderless link to all of the final fantasy buttons? thankz
DrDaMour
04-22-2003, 09:23 PM
border=0 in your img tag

imageid.width = newwidth
imageid.height = newheight
Jona
04-22-2003, 09:24 PM
That takes a little bit more. Change the below numbers that are in bold two the width and height you want to set for the image.

<html><head>
<script>
center_image1 = new Image();
center_image1.src = "your_file1.gif";
center_image2 = new Image();
center_image2.src = "your_file2.gif";
center_image3 = new Image();
center_image3.src = "your_file3.gif";
function changeCenterImage(img,w,h){
document.images['centerImage'].src=img; document.images['centerImage'].width=w; document.images['centerImage'].height=h;}
function clearCenterImage(){document.images['centerImage'].src="default_image.gif";}
</script>
</head><body>
<table align="left">
<tr><td><img src="image_one.gif" onmouseover="changeCenterImage(center_image1.src,120,75)" onmouseout="clearCenterImage()"></td></tr>
<tr><td><img src="image_two.gif" onmosueover="changeCenterImage(center_image2.src,150,45)" onmouseout="clearCenterImage()"></td></tr>
</table>
<table align="center">
<tr><td><img src="center_image.gif" name="centerImage"></td></tr>
</table>
</body></html>
HTMLmaniac
04-23-2003, 05:57 AM
sweet THX! plus..last thing i need is links....is that possible?
HTMLmaniac
04-23-2003, 09:17 AM
hmmmm i don't know why....but i tried the size thing and it ain't workin! i dunno why...but please help me out! thanx
Jona
04-23-2003, 01:04 PM
If it's in bold, it's the link. I don't know why the width and height wouldn't work for you.... I'll think about this for a while and give you my "results." :p

<html><head>
<script>
center_image1 = new Image();
center_image1.src = "your_file1.gif";
center_image2 = new Image();
center_image2.src = "your_file2.gif";
center_image3 = new Image();
center_image3.src = "your_file3.gif";
function changeCenterImage(img,w,h){
document.images['centerImage'].src=img; document.images['centerImage'].width=w; document.images['centerImage'].height=h;}
function clearCenterImage(){document.images['centerImage'].src="default_image.gif";}
</script>
</head><body>
<table align="left">
<tr><td><a href="your_link.html"><img src="image_one.gif" onmouseover="changeCenterImage(center_image1.src,120,75)" onmouseout="clearCenterImage()"></a></td></tr>
<tr><td><img src="image_two.gif" onmosueover="changeCenterImage(center_image2.src,150,45)" onmouseout="clearCenterImage()"></td></tr>
</table>
<table align="center">
<tr><td><img src="center_image.gif" name="centerImage"></td></tr>
</table>
</body></html>
Jona
04-23-2003, 01:07 PM
This works for me.....

<html><head>
<script>
center_image1 = new Image();
center_image1.src = "your_file1.gif";
center_image2 = new Image();
center_image2.src = "your_file2.gif";
center_image3 = new Image();
center_image3.src = "your_file3.gif";
function changeCenterImage(img,w,h){
document.images['centerImage'].src=img; document.images['centerImage'].width=w; document.images['centerImage'].height=h;}
function clearCenterImage(){document.images['centerImage'].src="default_image.gif";}
</script>
</head><body>
<table align="left">
<tr><td><a href="your_link.html"><img src="image_one.gif" onmouseover="changeCenterImage(center_image1.src,120,75)" onmouseout="clearCenterImage()"></a></td></tr>
<tr><td><a href="your_link2.html"><img src="image_two.gif" onmosueover="changeCenterImage(center_image2.src,150,405)" onmouseout="clearCenterImage()"></a></td></tr>
</table>
<table align="center">
<tr><td><img src="center_image.gif" name="centerImage"></td></tr>
</table>
</body></html>