Help with a image mouseover.

n666

08-17-2004, 02:21 AM

ok so i'm trying to do this
http://internetbrothers.com/dhtml_mouseover.htm

but i have additional goals:

after the mouseover the image2 has to stay

also.. i will have several image1s

so it's gona go like this: [] = image1 and {} = image2

{}
[][][][][]

when a person mouseovers image1, image2 changes and on mouseoff it stays
then the person mouseovers another image1 (different) and now image2 changes to yet another one and stays.

basically a list of thumbnails and a larger version as image2.

to make things less compliacted all thumbnails are named 001.jpg 002.jpg 003.jpg
and the bigger sized images are 001a.jpg 002a.jpg 003a.jpg

i hope this makes sense!

thnks for help in advance

Willy Duitt

08-17-2004, 03:23 AM

That's a bad, bad example....
It uses the worst.. eval...
Tables which are intended for tabular data....
And, OMG, deprecated tags....

Other than that, I think you are looking for a sort of zoom function. Either way, I would suggest posting some code and further explain what exactly it is you are trying to do....

.....Willy

hemebond

08-17-2004, 04:27 AM

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Image rollover</title>
</head>
<body>
<img src="image" onmouseover="document.getElementById('img2').src = 'image'">
<img src="" id="img2">
</body>
</html>

n666

08-17-2004, 04:42 AM

guys i'm a complete n00b.. i just found some code online and trying to implement it heh.

http://calypsobayhomes.com/Rental/featured.htm

^^ you can see that i was messing around with it if you hover over the first couple thumbs on the bottom..

so what needs to be done is for the images in thumbs to be shown as the main pic..
and once somebody mouse overs the thumb, the main pic stays..
so like in this case if you mouse over the 1 thumb you will see a pic with a couple at a dinner.. but once you move the mouse it goes back to the original image.. well i need it to stay at that pic with the couple..
if that's too hard.. i could have people click on the thumb to have the picture stay..

Willy Duitt

08-17-2004, 05:31 AM

It should be a simple matter to swap the source of IMAGE1 onmouseover of the thumbnails with something like so:

THUMB:
<img src="second/003.jpg" class="thumb"
onmouseover="document.images['image1'].src=this.src"
onmouseout="document.images['image1'].src='54.jpg'">

All of this below could be done as the above using a style class and calling the two event handlers to swap images....

<td width="868" height="42" bgcolor="#FFFFFF" style="border-left-width: 1; border-right-width: 1; border-top-width: 1; border-bottom-style: solid; border-bottom-width: 1; border-top-style:solid" bordercolor="#C0C0C0" colspan="8">
<onmouseout="turnOff('image1')"onmouseover="turnOn('image1')"><A HREF="#" onmouseout="turnOff('image1')"onmouseover="turnOn('image1')">
<IMG alt="001" border="1" name="image1"
src="second/001.jpg" width="67" height="50"></A><onmouseout="turnOff('image1')"onmouseover="turnOn('image1')"><A HREF="#" onmouseout="turnOff('image1')"onmouseover="turnOn('image1')">

<IMG alt="001" border="1" name="image1"
src="second/001.jpg" width="67" height="50"></A><onmouseout="turnOff('image1')"onmouseover="turnOn('image1')"><IMG alt="IB Logo" name="image1"
src="second/002.jpg" style="border-right-style: solid; border-right-width: 1; border-top-style: solid; border-top-width: 1; border-bottom-style: solid; border-bottom-width: 1; padding-left: 0; padding-right: 0; padding-top: 1; padding-bottom: 1" width="67" height="50"><img border="0" src="second/003.jpg" style="border-right-style: solid; border-right-width: 1; border-top-style: solid; border-top-width: 1; border-bottom-style: solid; border-bottom-width: 1; padding-left: 0; padding-right: 0; padding-top: 1; padding-bottom: 1" width="67" height="50"><img border="0" src="second/004.jpg" style="border-right-style: solid; border-right-width: 1; border-top-style: solid; border-top-width: 1; border-bottom-style: solid; border-bottom-width: 1; padding-left: 0; padding-right: 0; padding-top: 1; padding-bottom: 1" width="67" height="50"><img border="0" src="second/005.jpg" style="border-right-style: solid; border-right-width: 1; border-top-style: solid; border-top-width: 1; border-bottom-style: solid; border-bottom-width: 1; padding-left: 0; padding-right: 0; padding-top: 1; padding-bottom: 1" width="67" height="50"><img border="0" src="second/007.jpg" style="border-right-style: solid; border-right-width: 1; border-top-style: solid; border-top-width: 1; border-bottom-style: solid; border-bottom-width: 1; padding-left: 0; padding-right: 0; padding-top: 1; padding-bottom: 1" width="67" height="50"><img border="0" src="second/010.jpg" style="border-style: solid; border-width: 1; padding-left: 0; padding-right: 0; padding-top: 1; padding-bottom: 1" width="67" height="50"><img border="0" src="second/011.jpg" width="67" height="50"><img border="0" src="second/012.jpg" width="67" height="50"><img border="0" src="second/014.jpg" width="77" height="50"><img border="0" src="second/018.jpg" width="67" height="50"></td>
</tr>

.....Willy

hemebond

08-17-2004, 06:46 AM

Wait. Am I on some global ignore list or something?

Willy Duitt

08-17-2004, 07:10 AM

Wait. Am I on some global ignore list or something?

No, of course not....

But your suggestion did not account for returning the image to its original state onmouseout and document.images is much more backwards compatable than getElementById....

No offense intended....
Merely offering an alternative....

.....Willy

Garadon

08-17-2004, 08:09 AM

<head>
<title>Untitled</title>
<script>
function showLargeImage(aObj){
document.getElementById('large').src=aObj.src.split('.')[0]+'a.'+aObj.src.split('.')[1];
}
</script>
</head>
<img id="large" src="">
<img onmouseover="showLargeImage(this)" src="001.jpg">
<img onmouseover="showLargeImage(this)" src="002.jpg">
<img onmouseover="showLargeImage(this)" src="003.jpg">
<img onmouseover="showLargeImage(this)" src="004.jpg">
<body>

hemebond

08-17-2004, 10:59 PM

Nyour suggestion did not account for returning the image to its original state onmouseoutafter the mouseover the image2 has to stayI must have interpreted this wrong.

Willy Duitt

08-18-2004, 02:08 AM

I must have interpreted this wrong.

Oh... my apologies...
I can only assume I myself got confused when I seen all the onmouseout functions changing the image back in his code...

<A HREF="#" onmouseout="turnOff('image1')"onmouseover="turnOn('image1')">
<IMG alt="001" border="1" name="image1"
src="second/001.jpg" width="67" height="50"></A>

.....Willy

n666

08-20-2004, 04:34 AM

Garadon: when i mouse over the 'large' images changes to '001' not '001a.jpg'

what should i do?

n666

08-20-2004, 04:39 AM

Willy i tried your thing.. but i think without a bit more explanation i cant get it to work..

i dont really understand how your solution works (or doesnt work :P)

could you fill me in?

once again i really appreciate the help!

n666

08-20-2004, 04:56 AM

ok here's what i got so far
this line

"document.getElementById('large').src=aObj.src.split('.')[0]+'a.'+aObj.src.

given http://calypsobayhomes.com/Rental/001.jpg
chenges it to http://calypsobayhomes.com/Rental/001

not
http://calypsobayhomes.com/Rental/001a.jpg

a fix?

n666

08-20-2004, 06:46 AM

nm i got it..
i guess that makes me l33t

many thanks for the help guys!

n666

08-23-2004, 06:30 PM

omg.. i lost the solution and now i cant do it for some reason..

http://www.calypsobayhomes.com/Rental/feat.htm

^^ check out what happens. please help me out.

thnx

hemebond

08-24-2004, 12:04 AM

It's because you've gone and put your second lot of images in a sub-folder, but haven't updated your Javascript. Look at what I posted, it's the simplest example in here.

You should also read this http://www.mozilla.org/docs/dom/technote/tn-dom-table/