Image changes on Link Hover?

[Hikoto]

Hello

I was just wondering if there's a Javascript (or whatever works) for this.

Let's say I have a few links in a list:

1. A
2. B
3. C

Is it possible that as one hover each link, an image at another fixed part of the layout changes?

Take a look at this website. As you hover over the image, the text below changes, is it possible to do it the other way?

I did a search before posting and anything that came close was this thread.

it could be as simple as

<a href="./images/image1.gif" target="myFrameName">Hover HERE!</a>

or could require javascript to change the .src of the image.

I do not want users to click for the image to appear, ruling the first suggestion out. But what exactly does the 2nd line mean? =/

I'm open to all suggestions! >.< Your help is much appreciated! Also, please don't use too much Javascript or related jargon, I would rate myself a total newbie in this area. =/

(If this is in the wrong forum, please move it accordingly I guess. >.<)

[jscheuer1]

http://www.dynamicdrive.com/dynamici...thumbnail2.htm

In the above script, images or text may be hovered or clicked to change an image elsewhere on the page. In simplest terms (or darn near simplest terms) you can do this sort of thing like so:

<img name="theimage" src="some.gif"><br>
<span onmouseover="document.images.theimage.src='other.gif'">Hover me</span>

[12345c]

Such as this 2nd example: http://javascript.aho.ru/example/JsPrimeryCode-67.htm (with cyrillic font), but need to write onmouseover insread onclick. And to preload pictures automatically by onload.

<table align=right width=420 height=340 border=1 cellspacing=0><tr><td align=center>
	<img id=i1 src="snow.gif"><br>
	<u><b id=d1>(place for caption)</b></u></td></tr></table><br>
<B>Preloading images.</B><br><br>

<SCRIPT>d=document;g=function(X){return document.getElementById(X)}
aimg='snow.gif,snow21.gif,fo167-YM20030829-1.jpg,Imaf4-YM20041031.jpg'.split(',');
adiv='snow;snow21;summer;autumn'.split(';');

preloadPict=function(i){aim=[];for(i=0;i<aimg.length;i++){aim[i]=new Image();aim[i].src=aimg[i];
	 name=d.getElementsByName('ahref')[i].innerHTML=adiv[i];}}
viewPict=function(i){if(!self.aim)preloadPict();if(!self.aim||!self.aim[aimg.length-1])return;
	g('i1').src=aim[i].src;g('d1').title=g('d1').innerHTML=adiv[i];}

onload=preloadPict
</SCRIPT><br><br>

View by mouseover:<br>
<a href=# name=ahref onmouseover=viewPict(0);return!1>1</a><br>
<a href=# name=ahref onmouseover=viewPict(1);return!1>2</a><br>
<a href=# name=ahref onmouseover=viewPict(2);return!1>3</a><br>
<a href=# name=ahref onmouseover=viewPict(3);return!1>4</a><br><br>

This code is placed for example on http://javascript.aho.ru/example/JsPrimeryCode-67a.htm .

[boxxertrumps]

this could be accomplished with css.

This code Should Work
<style>
div.bgchange1 {background-image: url('bgnormal1.jpg')}
div.bgchange1:hover {background-image: url('bgchanged1.jpg')}

div.bgchange1 {background-image: url('bgnormal1.jpg')}
div.bgchange1:hover {background-image: url('bgchanged1.jpg')}
</style>

<div class="bgchange1"><a href="Doc.html">
<img src="transperent.gif">
</a></div>

<div class="bgchange2"><a href="Doc2.php">
<img src="transperent.gif">
</a></div>

also, this way can be easier to implement. i find JS complicated.

[jscheuer1]

12345c,

Your method seems a bit complex for a beginner such as Hikoto claims to be and poorly thought out. Your opening script tag is invalid, the type attribute is required. Using 'g', 'd', and especially 'i' as globals is just asking for conflicts with other poorly chosen global variable names in other scripts. Using the onload event to preload images is less efficient than simply preloading them and is another potential source of script conflicts.

boxxertrumps,

Unless I misunderstood your example, it will not work in any but the latest (IE 7) version of explorer and I fail to see how much simpler all that is than the basic javascript example I offered. Perhaps you need to stop being afraid of javascript. Both css and javascript can be very simple or very complex or anything in between, depending upon how complexly a particular bit of one or the other of them is written.

[boxxertrumps]

In My Defense, I Have A Small Attention Span, And The CSS Is Valid!

[jscheuer1]

In My Defense, I Have A Small Attention Span, And The CSS Is Valid!

Valid is good, works is better. The css can be made to be both valid and compatible with IE 6 and earlier. You did leave off the type attribute for your style tag though. I guess technically you are right though, the style itself looks valid (except there is no reason to repeat it, that would throw at least a caution flag in the validator) to my casual eye and 'should' work but doesn't in a non-compliant browser such as IE 6 and earlier.

For the hover pseudo class to work in IE 6 and earlier, it must be used with a selector that selects an anchor link tag. This can be worked out at least two ways I can think of. One is to make the anchor link's display property block and applying your background change to its hover class. The other is by making a child element of the anchor link appear and disappear depending upon the hover state of its parent like is done here:

http://www.dynamicdrive.com/style/cs...image-gallery/