Image mouseovers without javascript - CSS & Sprites

Date: 3rd March 2008 at 1:27 am | Filed under: development, scripts | Author: Sam Burdge

This article is an extension / improvement upon another article I published on my site previously: {{post id="simple-javascript-for-image-mouseovers" text="Simple Javascript for Image Mouseovers"}}. As I am always looking for improved methods, I was discussing the pitfalls of the javascript method with a friend (and occasional comment writer / contributor to my site) who pointed me in the direction of CSS and image sprites. This lead me to research the topic further, and I found two articles in particular which were incredibly useful:

Read on…

5 Responses to “Image mouseovers without javascript - CSS & Sprites”

  • Comment by Jonn
    Date: April 29th, 2008 at 1:15 pm

    Very nice article. Thanks.

  • Comment by hot girls publisher
    Date: July 13th, 2008 at 7:20 am

    I used this article in the making of this website! Thanks! http://www.girlsbeinghot.com

  • Comment by Ray
    Date: February 18th, 2009 at 4:36 pm

    Super-informative site! I am loving it!! Will come back again - taking you feeds also, Thanks.

  • Comment by Иван Евсеев
    Date: June 13th, 2009 at 4:14 am

    Замечательно написано, но как говорится, для полноты информации нужно минимум хотя бы три источника :)

  • Comment by Datsu
    Date: July 31st, 2009 at 8:20 pm

    This was extremely helpful; exactly what I was looking for and simple to implement. Thank you!

Leave a Comment

WP Flash Title Plugin - Example Page

Date: 15th February 2008 at 10:42 pm | Filed under: blog | Author: Sam Burdge

As you can see from the above title this plugin allows you to embed any font you want, using any colour scheme you choose. Boom!

This is a screengrab from the WP Flash Titles Options page in WordPress, where you are able to select the font, colour, mouseover / hover colour, background colour, font-size, width and height for your Flash Titles.

{{post id="wp-flash-titles-plugin" text="Back to WP Flash Titles post"}}

WP Flash Title Plugin Options - Screengrab

Leave a Comment

Simple Javascript for image mouseovers

Date: 17th January 2008 at 12:54 am | Filed under: development, scripts | Author: Sam Burdge

This is a simple javascript for creating a mouseover effect on image links, also known as an image replacement script. It works in two stages. In this example "image 1" is the link image and "image 2" is the mouseover image.

Stage 1

Add this javascript to the head of your page:

function SwapImage1() {
document.image1.src="/images/image2.jpg"
}
 
function SwapImage1Back() {
document.image1.src="/img/image1.jpg"
}

Stage 2

Add the following onmouseover and onmouseout properties to your image:

<img src="/images/image1.jpg"
onmouseout="SwapImage1Back()" onmouseover="SwapImage1()" name="image1" />

3 Responses to “Simple Javascript for image mouseovers”

  • Comment by Donna Newby
    Date: July 17th, 2009 at 10:43 am

    Hi Sam,
    Thanks for the the helpful tips, i was wondering if you could help me over come a small challenge i am experiencing with adding this script to my WP blog, i want to add it two a java script widget in the side bar, if this is the case where do I paste the first part of the script? I have tried to put booth codes in the widget and it works great, but when I go to add another in the same or another widget the mouseover effect dosen’t happen? im stuck, here is n exmple of wht i m trying to chieve http://ruslantesliavych.com kinda like a picture menue bar. any help or direction would be truly appricited, thank you kindly. Donna

  • Comment by Sam Burdge
    Date: July 17th, 2009 at 11:04 am

    Hi Donna

    You might find this tutorial is a better alternative for what you are trying to do:
    http://www.samburdge.co.uk/development/image-mouseovers-without-javascript-css-sprites

    It is a way of doing the same thing, but just with CSS, no need for javascript.

    To do more than one image using the javascript above:

    in the head of the page:

    <script type=”text/javascript”>
    function SwapImage1() {
    document.image1.src=”/images/image2.jpg”
    }

    function SwapImage1Back() {
    document.image1.src=”/img/image1.jpg”
    }

    function SwapImage2() {
    document.image2.src=”/images/image4.jpg”
    }

    function SwapImage2Back() {
    document.image2.src=”/img/image3.jpg”
    }
    </script>

    in the body of the page:

    <img src=”/images/image1.jpg”
    onmouseout=”SwapImage1Back()” onmouseover=”SwapImage1()” name=”image1″ />

    <img src=”/images/image3.jpg”
    onmouseout=”SwapImage2Back()” onmouseover=”SwapImage2()” name=”image2″ />

  • Comment by Sam Burdge
    Date: July 17th, 2009 at 11:11 am

    You can see an example of this script working on multiple images at: http://www.pinkyvision.com

Leave a Comment

Neil Stewart Website

Date: 16th January 2008 at 7:07 pm | Filed under: portfolio | Author: Sam Burdge

Neil Stewart - HomeNeil Stewart - GalleryNeil Stewart - BiogNeil Stewart - Moving Image

This site, built for photographer Neil Stewart, is the first site 76 Creative have launched this year. Built with PHP, it features categorized thumbnail galleries, the usual biog, links and contact information, and also a moving image section with an embedded Flash Video (flv). All of the navigation for the site is done using images to create the hand written look that we were going for, it uses a javascript to give the mouseover effect for the images. For me, this is one of the best designed sites I have worked on so far, as it has a distinctive style, yet it's simple and functional.

Check it out: www.photoneil.com

Leave a Comment