DEVPPL
http://www.devppl.com/forum/

Make other things happen on hover?
http://www.devppl.com/forum/viewtopic.php?f=43&t=12692		 Page 1 of 1
Author:  Tomi [ Wed Jan 14, 2009 8:45 pm ]
Post subject:  Make other things happen on hover?
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
Author:  flabbyrabbit [ Wed Jan 14, 2009 8:58 pm ]
Post subject:  Re: Make other things happen on hover?
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
Author:  Tomi [ Wed Jan 14, 2009 9:05 pm ]
Post subject:  Re: Make other things happen on hover?
Awesome thanks! Now how would I make it so when I stop hovering it goes back to how it was?
Author:  flabbyrabbit [ Wed Jan 14, 2009 9:42 pm ]
Post subject:  Re: Make other things happen on hover?
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
Author:  Tomi [ Thu Jan 15, 2009 2:06 am ]
Post subject:  Re: Make other things happen on hover?
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.
Author:  rangana [ Thu Jan 15, 2009 2:50 am ]
Post subject:  Re: Make other things happen on hover?
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.
Page 1 of 1 All times are UTC + 1 hour
Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group
http://www.phpbb.com/