Jump to content

Onmouseover change text and image


TravellersLens

Recommended Posts

Hello guys,

 

i'm new on this forum and i hope you can help me.

 

I have a problem with onmouse function.The big photo will change when onmouseover on the little photo, but i like to ad text above the big photo which will change as well.

 

Demo: http://www.travellerslens.com/nicaragua/nicaragua.html

 

<div id="FotoBox"> <div id="FotoBoxRight"> <div class="LargeImage"><img name="main" src="nicaragua/granada_img_1.jpg"><br/><br/>© 2014 Travellers Lens</div></div><div id="FotoBoxLeft"> <ul id="navlist"> <li><a onmouseover="main.src='nicaragua/nicaragua_img_1.jpg'; " onmouseout="main.src='nicaragua/nicaragua_img_1.jpg';"><img src="nicaragua/granada_mg_1.jpg"></a></li> <li><a onmouseover="main.src='nicaragua/nicaragua_img_2.jpg'; " onmouseout="main.src='nicaragua/nicaragua_img_2.jpg';"><img src="nicaragua/nicaragua_mg_2.jpg"></a></li> <li><a onmouseover="main.src='nicaragua/granada_img_3.jpg'; " onmouseout="main.src='nicaragua/granada_img_3.jpg';"><img src="nicaragua/granada_mg_3.jpg" title="Granada"></a></li> <li><a onmouseover="main.src='nicaragua/nicaragua_img_1.jpg'; " onmouseout="main.src='nicaragua/nicaragua_img_1.jpg';"><img src="nicaragua/nicaragua_mg_1.jpg"></a></li><li><a onmouseover="main.src='nicaragua/nicaragua_img_2.jpg'; " onmouseout="main.src='nicaragua/nicaragua_img_2.jpg';"><img src="nicaragua/nicaragua_mg_2.jpg"></a></li> <li><a onmouseover="main.src='nicaragua/nicaragua_img_3.jpg'; " onmouseout="main.src='nicaragua/nicaragua_img_3.jpg';"><img src="nicaragua/nicaragua_mg_3.jpg"></a></li>  <li><a onmouseover="main.src='nicaragua/san_juan_del_sur_img_1.jpg'; " onmouseout="main.src='nicaragua/san_juan_del_sur_img_1.jpg';"><img src="nicaragua/san_juan_del_sur_mg_1.jpg"></a></li> <li><a onmouseover="main.src='nicaragua/nicaragua_img_6.jpg'; " onmouseout="main.src='nicaragua/nicaragua_img_6.jpg';"><img src="nicaragua/nicaragua_mg_6.jpg"></a></li> <li><a onmouseover="main.src='nicaragua/nicaragua_img_5.jpg'; " onmouseout="main.src='nicaragua/nicaragua_img_5.jpg';"><img src="nicaragua/nicaragua_mg_5.jpg"></a></li>  </ul></div></div>

I hope someone can help me, I saerched for days on the web.

Thanks, Jordi

 

 

Link to comment
Share on other sites

The copy right text?

put the text within container element with id ref,

<span id='maintext'>© 2014 Travellers Lens</span>

and as with img change on mouseover change the text on same event using

onmouseover="main.src = 'nicaragua/nicaragua_img_2.jpg';  maintext.innerHTML = '© 2014 picture02';"
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...