Jump to content

text hover changes a pic


Hooch
 Share

Recommended Posts

Hi all. I hope to get my point across here without confusing everyone. What is the best way to have the ability to mouse over a link ( it needs to be a link too) that will change a picture on another part of a page? There will be about 40-60 of these links. I'm helping out with a local artist communities webpage. They will have anywhere from 40 - 60 members. On the members page they want to be able to show all members on one page. They will be in 2 columns and there will be a spot between the 2 columns for a small pic of the atrtist. So when you mouse over each name you can see thier picture, and if you want to see more just click the link. Is this a possiblity? Thank you

Link to comment
Share on other sites

Yes it's possible, you can use javascript to change pics on a page, i have given you 3 examples of some famous painters :) (the pics may take a second to load when you mouse over, you could get round this by Preloading the images)

<body><a href="#" onmouseover="main.src='http://www.abm-enterprises.net/artgall2/monalisa.jpg'" onmouseout="main.src='http://www.atd.ucar.edu/rsf/IMPROVE/SPOL/widgets/blank.gif'">leonardo da vinci</a><br /><a href="#" onmouseover="main.src='http://www.wmich.edu/~emrl/vt/pics/michelangelo_david_detail.jpg'" onmouseout="main.src='http://www.atd.ucar.edu/rsf/IMPROVE/SPOL/widgets/blank.gif'">michelangelo</a><br /><a href="#" onmouseover="main.src='http://examples.oreilly.com/java2d/examples/Raphael.jpg'" onmouseout="main.src='http://www.atd.ucar.edu/rsf/IMPROVE/SPOL/widgets/blank.gif'">raphael</a><img style="height:300px;width:200px;position:absolute;left:500px; top:100px" id="main" src="http://www.atd.ucar.edu/rsf/IMPROVE/SPOL/widgets/blank.gif" /></body>

Link to comment
Share on other sites

Hi Scott, I have another question. Is it possible to add alt="text here" somewhere over the text of the link? So when you scroll over the artists name, it will say they are a "painter" or "carver" etc. Thank you..Hooch btw, here's my work in progress TIArts.org Go to the members page to see this code in action.

Link to comment
Share on other sites

Is it possible to add alt="text here" somewhere over the text of the link? So when you scroll over the artists name, it will say they are a "painter" or "carver" etc.

Yes it's possible - but don't use alt, use title.alt is the text that is displayed when your picture doesn't load (IE incorrectly displays it when you mouse over a pic)title should be used to display text when you mouse over a pic or anything else and works in all brosers.Example:
<a href="#" title="painter">peter</a><a href="#" title="caver">bob</a>

:)

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
 Share

×
×
  • Create New...