[Frogger]

Hi,

Just wondering if someone can please help. I have worked out how to change an image when you mouse over it but i also want to be able to mouse over some text that will also change the same image.

Any ideas how to mouseover either the text or image to chnage this using CSS.

Code below for mouse over image but mouse over text is not changing it.

Code:

<style type="text/css" media="screen">
  #image {
    width: 100px;
    height: 100px;
    background: URL("images/residential-off.jpg");
  }
  #image:hover {
    background: URL("images/residential.jpg");
  }
</style>

<a href="page1.htm"><div id="image"></div></a>
<br />
<a href="page1.htm" id="image">test</a>

[wirehopper]

You can't change the text with CSS, unless the text is part of an image - which I don't recommend.

You'll have to use javascript.

[Frogger]

Thanks for your help. I will look at using javascript.

[CodeRobber]

you can use some inline javascript if you like

<img id="test" src="someimage.jpg" />

<a href="index.htm" onmouseover="document.getElementById('test').src=' differentimage.jpg'" onmouseout="document.getElementById('test').src='s omeimage.jpg'">Some text</a>

That might do the job - but try to contain it in a function and externally source it.

something like:

function swapImageOver(id){
document.getElementById('test').src='differentimag e.jpg';
}

function swapImageOut(id){
document.getElementById('test').src='someimage.jpg ';
}

<a onmouseover="swapImageOver(test)" onmouseout="swapImageOut(test)" ><img> or Text here</a>

[Frogger]

Thanks coderobber. You have made a very good point.

How would I then go about if I wanted to change more than one mouse over image.

EG

Code:

<a onmouseover="swapImageOver(test1)" onmouseout="swapImageOut(test1)" ><img id="test1"> or Text here 1</a> 

<a onmouseover="swapImageOver(test2)" onmouseout="swapImageOut(test2)" ><img id="test2"> or Text here 2</a>

Something with the code below would have to be done otherwise it will only chnage the one image.

Code:

function swapImageOver(id){
document.getElementById('test').src='differentimag e.jpg';
}

function swapImageOut(id){
document.getElementById('test').src='someimage.jpg ';
}

[CodeRobber]

Hi Frogger,

function swapImageOver(id){
document.getElementById(id).src='differentimag e.jpg';
}

function swapImageOut(id){
document.getElementById(id).src='someimage.jpg ';
}

sorry I think I forgot to replace the static 'test' with that dynamic id parameter.

as long as what you pass from you html i.e onmouseover="swapImageOver(test2)" onmouseout="swapImageOut(test2)" contains the right value then all should be well.

[Frogger]

Thanks for getting back to me coderobber. I tried to impliment the code you suggested but for some reason when I mouse over the first image the second image now changes. Any ideas why this might be happening.

JAVASCRIPT

Code:

function swapImageOver(residential){
document.getElementById('residential').src='images/residential-landscaping-off.jpg';
}

function swapImageOut(residential){
document.getElementById('residential').src='images/residential-landscaping.jpg ';
}

function swapImageOver(commercial){
document.getElementById('commercial').src='images/commercial-landscaping-off.jpg';
}

function swapImageOut(commercial){
document.getElementById('commercial').src='images/commercial-landscaping.jpg ';
}

HTML

Code:

<a href="residential.htm" onmouseover="swapImageOver(residential)" onmouseout="swapImageOut(residential)"><img src="images/residential-landscaping.jpg" id="residential" class="gallerypic" /></a>

<a href="commercial.htm" onmouseover="swapImageOver(commercial)" onmouseout="swapImageOut(commercial)"><img src="images/commercial-landscaping.jpg" id="commercial" class="gallerypic" /></a>

Thanks for all your help.

[CodeRobber]

Hi Frogger,

Yes this is because the functions are the same - they do not become differenct if the only difference is what is in the (parameters bit).

What should probably work is if you keep just the two functions:

function swapImageOver(id){
document.getElementById('residential').src='images/residential-landscaping-off.jpg';
}

function swapImageOut(id){
document.getElementById('residential').src='images/residential-landscaping.jpg ';
}

but in your html try putting swapImageOver('commercial') notice the 'commas' around value - this will pass it into the id variable.

then inside your function try just changing the name of the src=

src='images/' + id + '-landscaping.jpg';

try that

[Frogger]

src='images/' + id + '-landscaping.jpg'; didnt seem to work. Thats ok I am happy with how it is currently working. Thanks again CodeRobber for all your help.