How do i make my transparent gif image a link which the link won't respond if press the transparent part?
<img src="skins/sunlift/styleImages/navbar_pic/leafshape.gif>
Any ideas?
<img src="skins/sunlift/styleImages/navbar_pic/leafshape.gif>
here is the problem ----------------------------^-- there should be "
should be
<img src="skins/sunlift/styleImages/navbar_pic/leafshape.gif">
............................................................
hi now give to your anchor link display properties as like this
a{
display:inline-block;
vertical-align:top;
}
because a is inline block element
Related
I have an image with URL
http://nba2kcontest.com/fantasy/img/player.png
It is visible when I directly go to this URL, but not when I use html img tag it is not displaying:
<img src="http://nba2kcontest.com/fantasy/img/player.png">
I don't know what is the problem because the permission is also 0777
Edit
I don't know what but when I replace the picture player.png with player.svg it works!
Give the below a shot, maybe you have a background color set on a parent container that is making your png not visible.
.img-container{
background:#fff;
padding:10px
}
<div class="img-container">
<img src="http://nba2kcontest.com/fantasy/img/player.png">
</div>
I want to use the above image in a img class to put underneath the photos. That have that class. See the markup example below.
<img class="img-shadow" src="image.jpg">
or may be like this
<div class="img-shadow">
<img src="image.jpg">
</div>
How would the css look?
HTML:
<div class="img-shadow">
<img src="image.jpg">
</div>
CSS:
.img-shadow{
background:url(your image URL) no-repeat center bottom;
padding-bottom:20px;
text-align:center;
}
Adjust the padding on the bottom of the div to increase or decrease the distance between the bottom of the image and the shadow.
Just as another option, instead of using an image for your shadow, you can use CSS3 shadow property to achieve something similar.
In the fiddle, I show the same image using the class and not using the class: JS Fiddle
.img-shadow {
box-shadow: 0px 2px 10px #000;
width: 200px;
}
If what you said in the question is what you really want to do, You can simply put the shadow image below the other image using an <img> tag like
<div>
<img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSyLdxqT0UBb31xeB4yMfUjCqKld2q9FqpUMZEIvq175_4-MgAPUA"/> //Your image
<img src="http://i.stack.imgur.com/ZLAht.png"/> // Your shadow image
</div>
and position them accordingly using css..
check this fiddle
Note:there might be better ways for creating a shadow below an image, just answering the question in a straight forward manner..
This image:
Alright well I'm using this code for it to make the logo on the left a clickable image
a href="http://nucammer.com"><img src="logo.jpg" alt="Nucammer.com" align="left"
But if I take out the link so just img src="logo.jpg" alt="Nucammer.com" align="left"
it turns it back to the way it should look here
I don't see how making an image clickable screws up the menubar
Have you tried this?
a.image {
display:inline-block;
}
Where .image is the class you'll give to your anchor tag.
Border is not removing in the below code, which is image sprite . I have tried some methods to remove the border using style and border 0 ,but no use .
<style>
img.home{width:40px;height:32px;
background:url(share.png) 0 0;
border-style: none;}
img.next{width:40px;
height:32px;background:url(share.png) -36px 0;
border-style:none;}
</style>
<a href="http://www.yahoo.com/">
<img class="home" border="0">
</a>
<img class="next" border="0"/>
JSFIDDLE
Images come with a default border, that only disappears when the image is downloaded. That image comes from the src attribute of the image. If no src is set, then the image won't be downloaded, and the border will be forever there - your case exactly.
A normal img tag looks like this:
<img src="/something.jpg" />
yours looks like this:
<img />
You're adding your image through css's background-image. Not as it should be done. You can add a background image, but it's usually for other purposes. (check the aside at the bottom).
Try removing the background image and placing the image location on the src attribute of the image. Like this:
<img class="next" src="/share.png" />
You'll see the image has no border now.
Aside
When a background image is added to an img element, it's usually to provide a placeholder image for when no img src is set. Think of avatars on the comments section of a blog.
Also
When creating a sprite, you can use divs ps ems etc. Remember, the background-image can be applied to any element!
Suppose your html tag is <img class="somthing" /> and in the class "something" you have defined the background position of the image.
As you select a particular image from the image sprite more accurately, a particular position where the image is. Your class is proper where you fetch the image using the background position in css.
A simple solution to remove the border is just make the img tag as a div.
if you fetch the image according to the background position why it is necessary to use a img tag.
Just write the html like ...<div class="next" ..>
you can use a base64 very small transparent image, if you would not use an external file
<img class="next" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"/>
Found it out, JOPLOmacedo was right, but you don't have to remove the background, just use the src tag. JSFIDDLE. (Sorry about the images, but I needed them to test the src)
HTML:
<a href="http://www.yahoo.com/">
<img class="home" src="http://jsfiddle.net/img/logo.png" border="0"/>
</a>
<img class="next" src="http://jsfiddle.net/img/social-icons/facebook_16.png" border="0"/>
CSS:
img.home{width:40px;height:32px;
border: none; background:url(http://farm1.staticflickr.com/111/315308766_163c08db38.jpg) 0 0;}
img.next{width:40px;
height:32px;
border:none; float: right;
background:url(http://farm1.staticflickr.com/111/315308766_163c08db38.jpg) -36 0;}
How can I change an image (set using <img> tag, which is not a <div> or <some_selector> background, that can be easily solved by changing background or background-image attribute on :hover in CSS) on mouse rollover (hover) like the favorite tag remove button in stackoverflow homepage, in which the (X) image becomes red on hover ?
HTML
<div id="css-image-swap-1">
<img id="swap-1" src="default-image-url" alt="CSS image swap" />
</div>
CSS
#css-image-swap-1{
width:300px; height:150px; background:url(swap-image-url);
}
#css-image-swap-1 img:hover{
opacity:0;
}