Make other things happen on hover?

Tomi · **Joined:** Mon Jun 26, 2006 7:51 pm **Posts:** 925

What I want is so when I hover over a link, a word which is not apart of the link will change color and an image will appear that was once hidden. Trying to make quite an interesting and dynamic portfolio page, this would be very useful!

Thanks

flabbyrabbit · **Posted:** Wed Jan 14, 2009 8:58 pm

Code:

<script type="text/javascript">
function change() {
   document.getElementById('link1').style.color = "red";
   document.getElementById('image1').style.display = "block";
}
</script>

<a href="#" onMouseOver="javascript:change();">Hover over me :)</a><br><br>
<a href="#" id="link1" style="color: green">green link?</a><br>
<img src="http://www.modernlifeisrubbish.co.uk/images/illustrations/google-as-a-giant-robot.jpg" id="image1" style="display: none" width=500>

Hope that helps,
Flabby Rabbit

Tomi · **Joined:** Mon Jun 26, 2006 7:51 pm **Posts:** 925

Awesome thanks! Now how would I make it so when I stop hovering it goes back to how it was?

flabbyrabbit · **Posted:** Wed Jan 14, 2009 9:42 pm

Code:

<script type="text/javascript">
function changeover() {
   document.getElementById('link1').style.color = "red";
   document.getElementById('image1').style.display = "block";
}
function changeout() {
   document.getElementById('link1').style.color = "green";
   document.getElementById('image1').style.display = "none";
}
</script>

<a href="#" onMouseOver="javascript:changeover();" onMouseOut="javascript:changeout();">Hover over me :)</a><br><br>
<a href="#" id="link1" style="color: green">green link?</a><br>
<img src="http://www.modernlifeisrubbish.co.uk/images/illustrations/google-as-a-giant-robot.jpg" id="image1" style="display: none" width=500>

Something like that.
Flabby Rabbit

Tomi · **Joined:** Mon Jun 26, 2006 7:51 pm **Posts:** 925

Great, thanks for the help! Going to push this even further though :p

Say I have this setup:

Link (red) - Hover turns text below red.
Link (green) - Hover turns text below green.
Link (blue) - Hover turns text below blue.

'Text that changes color when link is hovered'.

Basically I need a way to separate them into different ids?

Hope that made sense! :p

Thanks again.

rangana · **Posted:** Thu Jan 15, 2009 2:50 am

Might be of interest:

Code:

<style type="text/css">
*{margin:0px;padding:0px;}
#container{
margin:20px;
font-family:Arial,tahoma,verdana;
font-size:12pt;
}
#container ul{
list-style-type:none;
margin:10px 0px 30px 0px;
height:50px;
}
#container ul li{float:left;margin:10px;}
#container div{
width:300px;
height:100px;
border:1px solid #999;
margin:10px;
text-align:center;
}
</style>
<script type="text/javascript">
var ray={
   hover:function(){
      var arg = ray.hover.arguments[0];
      for(var i in arg){
         this.getID(i).style.color=arg[i];
      }
   },
   
   getID:function(el){
      return document.getElementById(el);
   }
}
</script>
<div id="container">
   <ul>
   <li>
   <a href="#" onmouseover="ray.hover({content:'red',another_content:'#930',h1_el:'#09c'})" onmouseout="ray.hover({content:'black',another_content:'#000',h1_el:'#000'})">Link1</a></li>
   
   <li><a href="#" onmouseover="ray.hover({content:'green',another_content:'#9cf',h1_el:'#0fc'})" onmouseout="ray.hover({content:'black',another_content:'#000',h1_el:'#000'})">Link2</a></li>
   
   <li><a href="#" onmouseover="ray.hover({content:'blue',another_content:'#00f',h1_el:'#00c'})" onmouseout="ray.hover({content:'black',another_content:'#000',h1_el:'#000'})">Link3</a></li>
   </ul>
   
   <div id="content">
   Content
   </div>
   
   <div id="another_content">
   Another content here
   </div>
   
   <h1 id="h1_el">This is an h1 element</h1>
</div>

Works well on multiple IDs, and customized font color of your desire.

The hover method of ray object expects an object (using JSON, you can surround it with {}). Should be in this format:

Code:

ray.hover({})

Place the ID and the color of the text that you wish in this format:

Code:

ray.hover({element_id:'the_color_you_wish'})

Hope that helps.

Make other things happen on hover?

Who is online