image swap on img src hrefs

Posted on 2006-04-20
Last Modified: 2012-06-27

i have been sucessully able to change background images on hrefs using a css a:link class

how can i get images which are hrefs to swap on mouseover.

for example - how would i apply css to change image1.jpg to image2.jpg on hovering.....

<img src="image1.jpg">
Question by:naifyboy123
    LVL 5

    Accepted Solution

    Must use event in tag:

    <img src="image1.jpg" onmouseover="this.src='image2.jpg'" onmouseout="this.src='image1.jpg'">
    LVL 4

    Expert Comment

    I think your talking about a rollover effect.

    Have a look at this and see if it helps...
    LVL 4

    Expert Comment

    Actually, re-reading what you said, I think PhilHow's answer's OK. Here's another page similar to the one above that has the img tags in the html, but the method is basically the same as the first one - the difference being that in the second one, the  images are shrunk by the CSS to 1px dots so that you can't see them and instead, we see the background image of the 'a' tag.
    LVL 4

    Expert Comment


    Here's that other page, if you're interested...

    Author Comment

    thanks guys - PhilHow's answer is the easiest and lowest maintenance.

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    Course: HTML5 for Beginning Beginners

    Are you looking for an efficient introduction to HTML5? Have you tried other HTML5 courses and found them too complex? Do you need just the basics of HTML5 to use with Wordpress or other content management system? If you said yes to any of these questions, this course is for you.

    "I want to put my photos online, but I don't want them stolen.  What settings should I use?" When You Put Photos Online First and foremost, any digital file published on the WWW can be copied, stored, modified, retransmitted, etc.  Remember Naps…
    Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
    In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…
    The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

    759 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    9 Experts available now in Live!

    Get 1:1 Help Now