how to use sprite with image links. when i try to use as below link lost
<a target="_blank" rel="nofollow" title="link1" href="http://www.yahoo.com">
<div id="yahoo1" class="logosprite"></div>
</a>
css:
#yahoo1.logosprite {
background-position:0 0;
height:16px;
width:16px;
}
can anyone suggest better solution ?
That's not valid markup.
Simply apply the CSS to the anchor and add the following css property so that it is the right size:
display: block;
a elements cannot contain div elements.
Just set the background image on the a itself.
Related
I've designed how my buttons would look in an external app and saved it as an image to use for my webpage, and I want to code the webpage so that when I hover over the button, it changes to the image of the button I've designed - is there a method to do this with html.css?
the current html code:
<div class = 'comment'>
<a href = "hidden_comments.html">
<img src='commentbar.jpg', width=90px>
</div>
the css code:
.comment{
display: inline;
margin-left: -10px;
}
Yes it's possible. have :hover as selector on the element in css. And add background-image part of css, for example below:
div:hover{
background-image: url("paper.gif");
}
It is not recommended to use CSS hover to do it. You may want to change image dynamically and you can not do it with CSS.
Here you can find an exact solution
I want to style and centre some pics that do not have any classes, only titles and some inline CSS styling already.
Is this possible to style this pic (make it 100% width) via a stylesheet using CSS only. Can CSS attributes whilst keeping the inline CSS in the HTML?
<img alt="My Third pic" src="http://www.example.com/thirdproduct" style="border-style:solid; border-width:10px; height:240px; width:220px" title="Third Pic">
How do I target an image by using the title, this is what I have so far
img [title~="Third Pic"] {
width:100%
}
If I understand correctly, you just need to get rid of the tilde (~) and the space between img and [title, as well as making the rule !important so it'll override the inline style
img[title="Third Pic"] {
width: 100% !important;
}
you can add this CSS to style the images based on the img tag
.parentDiv img{
width:100%;
}
or if you need the third img to have the style
.parentDiv img:nth-child(3){
width:100%;
}
So I'm trying to get a onMouseOver to replace an image when the mouse is hovering over a div, unfortunately, as I have it right now it only replaces the image when the mouse is directly over the image, not the div, is there a way to get this to work?
Should I use a CSS to place the image, and replace the image on hover instead?
<div class="link">
<a href="link.html">
<img src="img.png" onMouseOver="this.src='hoverimg.png'" onMouseOut="img.png'"
<div class="title">Title</div>
</a>
</div>
I prefer using CSS for this:
<div class="image-hover">
Some title
</div>
.image-hover { background: url(...);}
.image-hover:hover { background: url(...);}
This can be achieved with CSS and background images. You also should not be using a block level element (div) inside of an inline element (a). I've swapped it for a span. For example:
<style type="text/css">
.link a {
display:inline-block;
background: url('img.png') top left no-repeat;
width:(imagewidth)px;
padding-top:(imageheight)px;
}
.link a:hover {
background: url('hoverimg.png') top left no-repeat;
}
</style>
<div class="link">
<a href="link.html">
<span class="title">Title</span>
</a>
</div>
The complete optimum would be combining the two images into what is called a sprite and use background-position.
You can do this with CSS or jQuery. Most people will recommend that you use CSS because it is easier to debug:
If you want the image to change when you hover on the div, you can apply a :hover state to the div:
.link img{
background: url("image1.png");
}
.link:hover img
{
background: url("image2.png");
}
However you should note that this basically treats img as an inline-block element and does not change the src attribute.
jQuery will allow you to change the source, but it must be debugged if something goes wrong, and if JS is disabled, it will not run.
$(".link").hover(function(){
$(this).find("img").attr("src", "image2.png");
}).mouseout(function(){
$(this).find("img").attr("src", "image1.png");
});
JSFiddle
I began to learn html'n'css, but I've encountered one thing that I cannot explain. I have a html file, that has a div which acts like a link (in the application I am setting the div size and want for the whole box to act like a link). I cannot remove the text underline decoration for the text in the div though (Link1 in the Example is always underlined). The selector should be "any div within a link element", and because the link is red, I think it is correct.
I managed to do this by introducing a special class for removing the underline explicitly (Link2 in the Example is ok), but I would like to have all the menu styles in one place.
The question is, whether can someone explain why the removing deco like this (Link1) does not work. Moreover, I would like to ask if the organization of the menu is a good style, or if I should reorganize the code, e.g: having this for example:
<div>Blabla</div>
and the style:
a.menuitem {...}
a.menuitem div {width:...;}
Here is the minimal (non-)working Example:
<html>
<head>
<style>
a div.menuitem {
text-decoration: none;
color: red;
}
.remove-under {
text-decoration: none;
}
</style>
</head>
<body>
<a href="./index.html">
<div class="menuitem">Link1</div>
</a>
<a href="./index.html" class="remove-under">
<div class="menuitem">Link2</div>
</a>
</body>
</html>
Thanks a lot!
Semantically speaking a <div> should not go inside an <a>. div tags are block elements where anchor tags are inline elements - and block elements should never go inside inline elements. Instead use <span> if you need to stylize something different inline but in your case, additionally, you can add a class to the <a> which would work better.
Here is your new code:
<a href="./index.html" class="menuitem">
Link1
</a>
<a href="./index.html" class="remove-under menuitem">
Link2
</a>
You can have multiple classes to an element by putting a space, so Link2 has the class "remove-under" and "menuitem"
Update your CSS to remove the underline:
.remove-under {
text-decoration:none;
}
In order to get your whole a tag to be a link (not just the text) add the follow css for your menuitem class:
.menuitem {
display:block;
width: 100px;
height: 50px; /* or whatever your desired width and height */
background: red; /* to show that the whole anchor will be link, not just text */
}
This is not the ideal solution. You really should not be putting block level elements inside inline elements.
However, if you absolutely must get it working, you can add display: inline-block; to the div.
a div.menuitem {
text-decoration: none;
color: red;
display: inline-block;
width:100%;
}
.remove-under {
text-decoration: none;
}
You have 2 problems here:
You can't do something like this
<div></div>
because a is an inline element. What you do here is an invalid HTML code. DO it like this:
<div></div>
You try to apply text-decoration:none on the div element and you should apply it to the a element.
a {text-decoration:none;}
Let's say I have the following:
<style>
.myLabel {
color: blue;
}
.myLabel:hover {
color:red;
}
</style>
<div>
<img src='myimage.png' />
<span class='myLabel'>Image Label</span>
</div>
Is it possible to replace the image (also via css) when they hover over the span? If so, how could I do that?
There don't seem to be any sibling selector for previous siblings.
W3 defined adjacent siblings and some browser support seems to be available for general siblings -- but, both are for following sibling(s).
So, I think you'll find it easier to accomplish with :hover set to the div.
And, I've never heard of CSS being capable of altering a src attribute. About the only way I can think that might work to alter an image via CSS is to have src a transparent image and alter background-image.
<style>
.myLabel img { background-image: url('...'); }
.myLabel span { color: blue; }
.myLabel:hover img { background-image: url('...'); }
.myLabel:hover span { color:red; }
</style>
<div class='myLabel'>
<img src='transparent.png' />
<span>Image Label</span>
</div>
An easier way to do this would be to remove the img element and make the image a background image on the span. Then you can control the background image in your two CSS rules:
.myLabel { color: blue; background-image:url(myimage.png) }
.myLabel:hover {color:red; background-image:url(myotherimage.png) }
Then you just need some CSS to position the background image, and probably to add enough padding for the background image to not overlap any text.
You could also put the image inside the span:
<div class='myLabel'>
<span>
<img src='transparent.png' />
Image Label
</span>
</div>
Then your css would be:
.myLabel span:hover img { ... }
FYI Only <a> tags work with :hover in IE6 (but it's old anyway)
No, you can not replace the value of the src-attribute in any way.
Jonathan Lanowski Said:
And, I've never heard of CSS being capable of altering a src attribute. About the only way I can think that might work to alter an image via CSS is to have src a transparent image and alter background-image.
Keep the meaning of the IMG-element in mind. It's supposed to show an image as content, not presentation. If you put a transparent .gif or whatever in the src-attribute, you also remove content from the page.
The same applies to using different CSS-hover-techniques to change the image, you still remove the content as long as you don't have an actual image in the src-attribute. Plus, you won't be able to change the image while hovering the span-element as long as your document is marked up the way it is.
So then, this is a typical Javascript-job.
one technique is to have a single image file have multiple images in it and you use css rules to change the offset within the file to show.
see: http://www.alistapart.com/articles/sprites/
specifically the "Hovers" section.
They offer a functional example here:
http://www.alistapart.com/d/sprites/ala-image3.html
EDIT: I just realized that you asked to make the image change then the hover over the span not the image itself. To do that, I believe you would need to use javascript.