Make other things happen on hover?

[Tomi]

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]

Code: Select all

<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]

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

[flabbyrabbit]

Code: Select all

<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]

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]

Might be of interest:

Code: Select all

<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: Select all

ray.hover({})


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

Code: Select all

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


Hope that helps.