Welcome Guest ( Log In | Register)



2 Pages V  < 1 2  
 Reply to this topicStart new topic
> Image Rollovers In Javascript, A Write-Once, Use-Anywhere Approach
midnightvamp
post Dec 15 2005, 05:15 PM
Post #11


Privileged Member
*********

Group: [HOSTED]
Posts: 597
Joined: 9-May 05
From: Oshawa, Ontario, Canada, North America, Planet Earth, Our Sun's Orbit, Milky Way Galaxy, The Universe, Beyond
Member No.: 6,839
I just did image rollovers the other day, thought my approach was a little different, and was a linked image. What I did was:

CODE
<a href="#" onMouseOver="document.image1.src='images/image1_ro.jpg';" onMouseOut="document.image1.src='images/image1.jpg';"><img src="images/image1.jpg" name="image1" id="image1" border="0"></a>


I'll have to try out your example soon, and see if I can get it to work. I'm not all that advanced in Javascript I'll admit, and I'm a little intimadated by what I see.

(list)

Go to the top of the page
 
+Quote Post
MCSESubnet
post Mar 21 2007, 07:42 PM
Post #12


Newbie
*

Group: Members
Posts: 5
Joined: 21-March 07
Member No.: 40,446
If you find yourself unable to use javascript, or desire an alternative.

I would suggest using CSS. here is the basic idea of what you need in your CSS entry.

CODE
link_text    

    {/*make the link text transparent*/
        visibility: hidden;
    }

.link_href
    {/*Display this image in the link area*/
        background: url(imagepath/mouseout_button.gif) no-repeat;
    }
        
.link_href:hover
    {/*Display this image in the link area when you mouseover*/
        background: url(imagepath/mouseover_button.gif) no-repeat;
    }



(list)

Go to the top of the page
 
+Quote Post
« Next Oldest · Tutorials · Next Newest »
 

2 Pages V  < 1 2
Reply to this topicStart new topic

Collapse

> Similar Topics

Topics Topics
  1. Easy Image Rotate Tutorial(0)
  2. A Little Introduction To 3d Studio Max(9)
  3. Roll-over Image Links With Css(2)
  4. Image Preloader With Progress Bar Status(23)
  5. Extending The Image Preloader With Php4(3)
  6. Creating Rollovers With Buttons(2)
  7. How To: Change An Image When A User Clicks On It(11)
  8. Css And Javascript Combined For Dynamic Layout(9)
  9. How To Stop Image Hot Linking(17)
  10. Handy Javascript Code Snips(5)
  11. Tool Tips Using Only Css To Pop Up The Tool Tip(8)
  12. Creating A Simple Image Viewer(4)
  13. Image Shack Mod(2)
  14. Javascript Framework - A Shortcut Javascript(3)
  15. How To Make Image To Highlight When It`s Mouseovered(8)
  1. Image Gallery Tutorial Using Hoverbox(14)
  2. Simple Scripts In Html And Javascript(7)
  3. A Simple Php Captcha - Image Validation(21)
  4. Math Captcha Image Validation(1)
  5. Javascript Scroll Bar(13)
  6. Mootools - My Favourite Javascript Library(3)
  7. Image Rotator Script (another One)(0)
  8. Background Image Swap Script(15)
  9. Create A Simple Html Editor With Php And Javascript(3)
  10. Simple Javascript And Password System(9)
  11. Make A Moderately-secure Password System Using Javascript(4)
  12. Lesser Known Useful Javascript Features(2)


 

Display Mode: Standard · Switch to: Linear+ · Switch to: Outline

Track this topic · Email this topic · Print this topic · Subscribe to this forum

- Lo-Fi Version Time is now: 11th October 2008 - 09:02 PM
Powered By IP.Board © 2008  IPS, Inc.
Licensed to: Xisto Corporation