change the href attrb on hovring the imag using jquery or javascript

Question

i want to go to this image using jquery or javascript and then on hover the image change the href attrb to another src image

this is the code :

<a href="Sign-Up.aspx" ><img alt="Login" src="images/login3.png" style="width: 173px; margin-top: 0px; z-index:10;" /></a>

What have you tried? This is pretty easy using the [`.hover()`](http://api.jquery.com/hover/) and [`.attr()`](http://api.jquery.com/attr/) methods. — Rob W, Mar 18 '12 at 12:50

score 2 · Answer 1 · answered Mar 18 '12 at 13:02

First, let's give ourselves a way of identifying this anchor/image combo from anything else in your page:

<a class="button" href="Sign-Up.aspx" ><img alt="Login"
  src="images/login3.png"
  style="width: 173px; margin-top: 0px; z-index:10;" /></a>

Then let's write some jQuery to swap the images:

$('a.button img').mouseover(
    function() { $(this).attr('src', 'images/login3_hover.png'); }
);
$('a.button img').mouseout(
    function() { $(this).attr('src', 'images/login3.png'); }
);

The second bit ensuring we get back to the original state when not hovering.

However you don't actually need Javascript for this; you can instead do it using just CSS and HTML. To achieve this you have to separate the text and the image of the link. Something like the following HTML:

<a class='button' href="Sign-Up.aspx"><b>Login</b></a>

with some CSS:

a.button {
    width: 173px;
    height: 73px; // or whatever your image height is
    position: relative;
    background-image: url("images/login3.png");
    background-position: top left;
    background-repeat: no-repeat;
    display: block;
}

a.button:hover {
    background-image: url("images/login3_hover.png");
}
a.button b {
    position: absolute;
    left: -9999px;
}

(I've omitted the margin-top and z-index rules, since they're presumably dependent on other things going on in your page.)

What we're doing there is attaching the image to the anchor as a CSS background image, and then changing it when we're hovering over that anchor. The text (which was previously in the alt attribute for the image) is then styled so that it doesn't show (but is still available for search engines and accessibility tools).

There's still a problem with both those solutions, however, because the images/login3_hover.png image won't be loaded before you hover, so you'll get a brief flash of whatever the background colour behind the anchor is while it loads. To solve this, you need to use CSS sprites, which builds on the background-image technique above.

score 1 · Answer 2 · answered Mar 18 '12 at 12:49

1

Add an id to your image tag, E.G id="image", then add this javascript

<script type="text/javascript">
$(function(){
    $('#image').hover(function(){
        $(this).attr('src', 'images/new_image.png');
    });
});

answered Mar 18 '12 at 12:49

Pierre

1,553
12
22

`src` instead of `href`. `this.src = 'images/new_image.png';` instead of `$(this).attr(...)` is better though. – Rob W Mar 18 '12 at 12:51
@RobW thanx, I changed it to src. When using jQuery I think it's better using $(this).attr(). Another option is to preload the images, through var rollover = new Image; rollover.src = 'images/rollover.png'; Then you can just use $(this).attr('src', rollover.src); – Pierre Mar 18 '12 at 12:55
2

jQuery is JavaScript. Anything which is readable and well-supported in JavaScript does not have to be written in jQuery. For a list of many examples, see [When to use vanilla JavaScript vs jQuery?](http://stackoverflow.com/questions/4651923/when-to-use-vanilla-javascript-vs-jquery). – Rob W Mar 18 '12 at 12:57
@RobW I agree, I'm just so used to using jQuery for everything, I never actually think about using plain javascript for the most obvious things – Pierre Mar 18 '12 at 13:01

change the href attrb on hovring the imag using jquery or javascript

2 Answers2