CODEWITHSUNDEEP
htmlcss
user3226744
user3226744

Reputation: 35

How can I change img within 'a' tag when hover?

I have an img inside the a tag. When hovering on a, I want to change the image url. Is it possible with CSS?

<a  href="#"><img  src="img/takipet.png" alt=""></a>

Upvotes: 0

Views: 240

Answers (4)

MustDie1Bit
MustDie1Bit

Reputation: 561

You have few ways to do this.

If you prefer to use css you should replace with background-image property

a.some_class{
  background-image:url(your_image_url);
  background-repeat: no-repeat;
  display: block;      
  height:image_height;
  width:image_width;
}

a.some_class:hover{
   background-image:url(your_image_url2);
}

Also you can use two images wrapped with Div. And show/hide needed on div hover.

With jQuery

$('a img.your_img_class').mouseover(function () {
    $(this).attr("src", "hover_1_src");
})
.mouseout(function () {
    $(this).attr("src", "old_src");
});

Upvotes: 1

user2930889
user2930889

Reputation:

Change src="" attribute is can't change by Using CSS . Just Change with Javascript Or Jquery.
you can Just Control Styles By css .
Create Div Element And set background-image for it.

HTML Css:

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
<style>
#MyDiv{
    width:100%;
    height:100%;
    background-image: url('Image.jpg');
}
#MyDiv:hover{
background-image: url('NewImage.jpg');
}
</style>
</head>
<body>
    <div id="MyDiv" > </div>
</body>
</html>


Html Javascript:

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <img src="http://codeorigin.jquery.com/jquery-wp-content/themes/jquery/images/logo-jquery.png" onmouseover="this.src='http://www.google.com/images/srpr/logo11w.png';" >
</body>
</html>

Upvotes: 0

Jezen Thomas
Jezen Thomas

Reputation: 13800

To directly answer your question, here’s one CSS-only approach:

HTML:

<div id="the-image-wrapper">
  <img id="image-main" src="some/src">
  <img id="image-alternate" src="some/other/src">
</div>

CSS:

#image-alternate {display: none;}
#the-image-wrapper:hover #image-main {display: none;}
#the-image-wrapper:hover #image-alternate {display: inline;}

You’re probably better off trying an alternate approach however, such as using a background image instead. Of course, it really depends on the application.

If you’re going the background-image route, you should take a look at using sprites.

Upvotes: 2

Albzi
Albzi

Reputation: 15609

If it's a background image, you can do this:

.element:hover{
    background-image:url(bg.jpg);
}

or even

.element:hover a{
    background-image:url(bg.jpg);
}

If the a tag is within something else.

Upvotes: 1

Related Questions