How do change an image when user moves cursor over it?

Posted on 2007-07-28
Last Modified: 2010-04-09
This is probably easy buy I'm in a real rush so I'm counting on my experts! I created a gif file that I use for a button. When the user cursors over it, the cursor changes to the hand icon. I would also like to display a different gif file. (The gif file is actually just an image of text, so I want to display a gif file that has the text a different color - I'm using gifs instead of text because I'm using a non-standard font.) How do I do that?

I'm using Dreamweaver, ColdFusion and HTML.

Here's the current code for my button:

 <img src="/lookfeel/buttons/search1.gif" border="0" usemap="#Mapsearch" />
                <map name="Mapsearch" id="Mapsearch">
                  <area shape="rect" coords="0,0,240,40" href="/apps/search/search.cfm" alt="Search Recipes"/>
Question by:alicia1234
    LVL 11

    Accepted Solution

    <img src="/lookfeel/buttons/search1.gif" border="0" usemap="#Mapsearch" onmouseover="this.src = 'newbutton.gif' " onmouseout="this.src = '/lookfeel/buttons/search1.gif' " />

    or by using other functions or vars in the statement
    i.e. your other gif is /lookfeel/buttons/search2.gif
    <img src="/lookfeel/buttons/search1.gif" border="0" usemap="#Mapsearch" onmouseover="this.src = this.src.replace('1','2')" onmouseout="this.src = this.src.replace('1','2')" />

    The advantage of using the second example is if i.e. all your text images has a name with a 1 in it that should be replaced with a 2 for rollover, you don't have to change anything in the event handler for the other images.

    Author Comment

    Excellent! Thank you so much! ;-)
    LVL 11

    Expert Comment

    Glad to help.  Thanks for the grade and points :)

    Author Comment

    No problem. I've already implemented what you said and it looks great. ;-)

    Featured Post

    Looking for New Ways to Advertise?

    Engage with tech pros in our community with native advertising, as a Vendor Expert, and more.

    Join & Write a Comment

    Things That Drive Us Nuts Have you noticed the use of the reCaptcha feature at EE and other web sites?  It wants you to read and retype something that looks like this.Insanity!  It's not EE's fault - that's just the way reCaptcha works.  But it is …
    This is an updated version of a post made on my blog over 3 years ago. It is unfortunately, still very relevant as we continue to see both SQLi (SQL injection) and XSS (cross site scripting) attacks hitting some of the most recognizable website and …
    The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
    The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

    746 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

    16 Experts available now in Live!

    Get 1:1 Help Now