Don't like ads? PRO users don't see any ads ;-)
Public Pastes
Guest

Untitled

By: a guest on Apr 29th, 2012  |  syntax: None  |  size: 2.16 KB  |  hits: 22  |  expires: Never
download  |  raw  |  embed  |  report abuse  |  print
Text below is selected. Please press Ctrl+C to copy to your clipboard. (⌘+C on Mac)
  1. Image Rollovers by <img> and <a> events
  2. <a href="http://www.google.com" >
  3.     <img alt="arrow" name="ArrowImage"
  4.          onmouseover="document.ArrowImage.src='Images/arrow_on.gif'"
  5.          onmouseout="document.ArrowImage.src='Images/arrow_off.gif'"
  6.          src="Images/arrow_off.gif" />
  7. </a>
  8.        
  9. <a href="http://www.google.com"
  10.    onmouseover="document.arrow.src='images/arrow_on.gif'"
  11.    onmouseout="document.arrow.src='images/arrow_off.gif'">
  12.      <img src="images/arrow_off.gif" width="147" height="82"
  13.           name="arrow" alt="arrow" />
  14. </a>
  15.        
  16. <a href="http://www.google.com" >
  17.     This is some text explaining the image. If you mouse over it, the rollover won't change.
  18.     <img alt="arrow" name="ArrowImage"
  19.          onmouseover="document.ArrowImage.src='Images/arrow_on.gif'"
  20.          onmouseout="document.ArrowImage.src='Images/arrow_off.gif'"
  21.          src="Images/arrow_off.gif" />
  22. </a>
  23.  
  24. <a href="http://www.google.com"
  25.    onmouseover="document.arrow.src='images/arrow_on.gif'"
  26.    onmouseout="document.arrow.src='images/arrow_off.gif'">
  27.      This is some text explaining the image. If you mouse over it, the rollover WILL change.
  28.      <img src="images/arrow_off.gif" width="147" height="82"
  29.           name="arrow" alt="arrow" />
  30. </a>
  31.        
  32. // defined in application.js for example:
  33.  
  34. $("img").hover(function onmouseover(){
  35.     $(this).attr("src", "Images/arrow_on.gif");
  36. }, function onomouseout(){
  37.     $(this).attr("src", "Images/arrow_off.gif");
  38. });
  39.        
  40. /* use a more specific selector in your actual code */
  41. a {
  42.   /* on state */
  43.   background: url(Images/arrow.gif) no-repeat 0 0;
  44. }
  45. a:hover {
  46.   /* default state */
  47.   background: url(Images/arrow.gif) no-repeat -50px 0;
  48. }
  49.        
  50. a#rollover {
  51.    background: url("normal.jpg") no-repeat 0 0;
  52. }
  53.  
  54. a#rollover:hover {
  55.    background: url("rollover.jpg") no-repeat 0 0;
  56. }
  57.        
  58. <a id="rollover" href="link.html"><img id="rolloverimage" src="image.jpg" width="100" height="100" alt="text"/></a>
  59.        
  60. var atag =  document.getElementById('rollover');
  61.  
  62. atag.onmouseover = function() {
  63.     document.getElementById('rolloverimage').src = 'rollover.jpg';
  64. }
  65.  
  66. atag.onmouseout = function() {
  67.     document.getElementById('rolloverimage').src = 'image.jpg';
  68. }
create a new version of this paste RAW Paste Data