[SOLVED] Chaging Text/image on Hover

[phpSensei]

I have 5 images on my site for ranking a item.

 

Image 1 = Rank 1

Image 2 = Rank 2

Image 3 = Rank 3

Image 4 = Rank 4

Image 5 = Rank 5

 

 

Alright, I want everytime the mouse hovers over a image, the image changes to another and!!!!!

 

There is a little text for each image rank, like the description for each rank level. I want that text to change depending on which image is highlighted.

 

The text belongs in another div tag.

[emehrkay]

this shouldnt be too difficult

 

your html should probably look like this

 

 

<p id="img_rank:1"><img src="..." alt="..." /></p><span id="text:1">text</span>

<p id="img_rank:2"><img src="..." alt="..." /></p><span id="text:2">text</span>

...

 

 

script

var rank = {
stars = [
	document.getElementById('img_rank:1'),
	document.getElementById('img_rank:2') //do this for each p holding the image
],

actions: function(){
	var stars = this.stars;
	for(x in stars){
		var old_img	= stars[x].innerHTML;
		var text_field = document.getElementById('text:' + x);
		var old_text = text_field.innerHTML;
		stars[x].onmouseover = function(){
			this.innerHTML = '';//new img link
			text_field.innerHTML = ''; //new text
		};

		stars[x].onmouseout = function(){
			this.innerHTML = old_img;//old img link
			text_field.innerHTML = old_text; //old text			
		};
	}
}
};
window.onload = rank.actions();

[phpSensei]

thanks, the images dont change onhover though.

 

I want onmouseover, and onmouseout or something..

 

can you please put that down, i would realllly appreciate it. I dont know any Javascript btw, i am a php coder.

[emehrkay]

i dont know what you want the images to change to, thats why i left that area blank.

 

//new img link

 

you just pass it somehitng like <img src="...

 

based on what x is. for ease, I would suggest an easy naming scheme like

 

<img src="new_image_1" />

 

so that you can easily change out that 1 with the variable x