Rollover buttons and images

How can I add a Rollover images or Rollover buttons to my WordPress created site? How can I add a Rollover image with fade effect?

What is an image rollover? When you put the mouse pointer over the image (hover) the image changes. It’s pretty easy to have this kind of mouseover effect.

Chapter 1: Rollover buttons or images
Chapter 2: Rollover buttons or images with fade effect

Chapter 1: Rollover buttons or images

Put your mouse over the following image to see it change


Move your mouse over me

All you need to do is copy and paste the following code into your page or post:

<!–start_raw–><a href="Destination URL" target="_top" onmouseover="document.sub_but.src='http://yourdomain.com/onroll.jpg'" onmouseout="document.sub_but.src='http://yourdomain.com/normal.jpg'">
<img src='http://yourdomain.com/normal.jpg' style="width:200px; height:63px; border:0px solid #cc3300;" alt="Move your mouse over me" name="sub_but">
</a><!–end_raw–>

Change the parameters as follows...
- Destination URL is the URL you want the image to link to
- target="_top" opens the link in the same window. If you want it to open in a new window replace _top with _blank
- http://yourdomain.com/onroll.jpg is the url of the image that displays when someone points the mouse over it
- http://yourdomain.com/normal.jpg is the url of the image displaying when the mouse isn’t over it (note that you need to insert it twice in the code)
- Change width and height to fit your case
That’s it.

Don't want it to be a link?

Just change
<a href='Destination URL' target="_top"
to
<a nohref target="_top"

To have multiple rollovers on the same page

To have multiple rollovers on the same page give each rollover button a different name. In the examples above the name of the button is sub_but displaying three times per code. Just type something different for each button replacing sub_but.

How do I know what the URL of the images is in my case?

1. Create a new folder on your Desktop
2. Name this new folder something like 'files' or ‘media’ or whatever
3. Copy your .jpg or any other image file to that folder
4. Upload the folder to the main location (root) of your server using your FTP application
5. http://yourdomain.com/nameofthefolder/nameofthefile.extension will be the address at which the file will be stored on the web
Example: http://yourdomain.com/media/nameofthefile.jpg

Chapter 2: Rollover buttons or images with fade effect

Fast:

Slow:

How this is done is described in my WPFAQ.org E-Book (sample)


This FAQ is also discussed in my WPFAQ.org E-Book (sample)


© WPFAQ.org - Tutorials, Tips & Tricks is made with WordPress and for WordPress.
It's an EBookStoretoday.com company. It’s presented by Cédric Giger and hosted by HostGator.com

Thank you for visiting and supporting my website,
- Cédric -




Now share it…

Share

Comments are closed.