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
Related
I am working on a CSS userstyle and the problem is that I can't seem to modify images in buttons coded into a web page's html code:
<button type="submit" class="btn btn-default"><img alt="Ico-plus" src="//s.theoldreader.com/assets/ico-plus-369f50fa00968793b3c2e814f3e55de5.png"><i class="fa fa-spinner fa-spin" style="display:none;"></i></button>
the closest i can get to changing this through CSS is to change the code of the actual button and change its background through .subscribe-button-container .subscribe .dropdown-menu li form .control-group button{background-image:url("http://i.imgur.com/XYHilSy.png");}, rather than replace the image contained within it. It is possible to achieve what I am trying to do, or are such images simply hardcoded into the HTML?
I read these:
How to change an input button image using CSS?
Adding an image to submit button using CSS
Submit Button Image
but they all assume that I can modify the html code, while I can only try to override the css
You cannot modify HTML with CSS, you can only modify the appearance of HTML. Since the image url of an <img> is specified in HTML, you can't change it.
Here's what you can do:
Hide the image (display: none or opacity: 0)
Specify a background image for the button
Using a pseudo element as a sort of "stand-in" image tag may be worth exploring.
This solution will provide you with more flexibility in regards to styling this element in ways that wouldn't be possible with background images.
Think of the :pseudo-elementin this case as your "artificial img element" which serves as the "replacement" for the original img element you have now hidden.
.btn img {
display: none;
}
.btn:before {
content: "";
display: block;
background: url(https://s.theoldreader.com/assets/ico-plus-369f50fa00968793b3c2e814f3e55de5.png);
max-width: 18px;
max-height: 18px;
width: 18px;
height: 18px;
}
<button type="submit" class="btn btn-default"><img alt="Ico-plus" src="//s.theoldreader.com/assets/ico-plus-369f50fa00968793b3c2e814f3e55de5.png"><i class="fa fa-spinner fa-spin" style="display:none;"></i></button>
MDN
::before creates a pseudo-element that is the first child of the
element matched. It is often used to add cosmetic content to an
element by using the content property. This element is inline by
default.
https://developer.mozilla.org/en-US/docs/Web/CSS/::before
Is there any way by which i can replace the image mentioned in SRC attribute of image tab using any of css trick ?
<img src = "setting-icon.png"></img>
i want to replace the setting-icon.png with css property, I am able to put another image in background with background-image property of image tag but i need to hid the one mentioned in src and show what the one i mention in background-image property in css.
Yes this is weird requirement but the thing is i am doing customization in a third party application where i only have control over css, I can not modify the HTML tags.
thanks for reading through !
You can use content:url("image.jpg")
https://developer.mozilla.org/en-US/docs/Web/CSS/content
In your CSS,
.img {
content:url("/new/image/source.png");
}
If you cannot modify HTML,
img {
content:url("/new/image/source.png");
}
In HTML,
<img class="img"/>
I have not try this yet, but I not sure if the inline attribute src will overweight the CSS content.
Update
It should work if you already have src for your img element. Thanks #pol
You can't change the html attributes values with CSS, only javascript.
But, with CSS you can "hide" the image and put a background in its place.
div img {
height: 0;
width: 0;
padding-top: 175px;
padding-left: 280px;
background-image: url("http://www.planwallpaper.com/static/cache/6f/82/6f8200c95d588fde83d1f212f674611a.jpg");
}
<img src="http://www.planwallpaper.com/static/cache/a1/4e/a14e880ef245c3d159ba96ebbeb4c8c3.jpg">
<div>Changed img:</div>
<div><img src="http://www.planwallpaper.com/static/cache/a1/4e/a14e880ef245c3d159ba96ebbeb4c8c3.jpg"></div>
Good question to learn about unnoticed selectors using CSS,
Additionally, You can read more about other selectors,
For example:
img: hover {}
and some other nice selectors for different range of elements
:active
:after
:before
:first-child
:first-letter
:first-line
:focus
:hover
:lang
:link
:visited
You can even conditionally select like this:
img[src="setting-icon.png"] {
border: 1px solid #000000;
content:url("/new/image/source.png");
}
Reference: W3.org - Advanced Selectors
I am trying to get multiple effects on a single image hover to allow the best outcome with the least code possible. Note: I do not want jquery at all! CSS only (even 3).
So I have an image which will change on hover and at the same time cause a Div below the said image to change the background image as well (which is actually text, I just couldn't find a way to change the text so I tried the image) and with it all having the hover image on the IMG tag to have a link to the place I want.
So far I managed to get the image changed and the links working on the hover image with this:
CSS
.container
{
width: 1500px;
height: 400px;
}
.image a:hover .container
{
background-image: url('logo-tp-text.png');
}
HTML
<div class="image">
<a href="http://www.google.com">
<img src="logo-tp.png" onmouseover="this.src='logo-fb.png';" onmouseout="this.src='logo-tp.png';">
</a>
</div>
<div class="container"></div>
Now, as you much more experienced people than me can see, I have the image on IMG tag self onmouseovered and out to try and avoid complications on the CSS, which worked: it changes into the image I need (LOGO-FB) and reverts to LOGO-TP onmouseout, with the link working. However, it is not changing the .container background as expected on hover on the IMG tag (which is the A tag reference)
So, waiting for the beating: what am I doing wrong? Using FF 32 browser.
Css does not contains parent navigation selectors... Only descendant and following sibilings.
Since the .container div is a sibiling to the .image div, you could set the :hover pseudo to the div instead to the anchor:
.image:hover ~ .container {
background-image: url('logo-tp-text.png');
}
As ~ is a general sibiling selector.
More info here: MDN General sibiling selector
Also
If the html markup stays the same as you showed, I mean, if the .container remains as a immediate followed sibiling to the .image div, you can also use an Adjacent Sibiling Selector
.image:hover + .container {
background-image: url('logo-tp-text.png');
}
I am using an image button for navigation, because I want hover effects.
I mean, I used button image instead of <ul> tag or <div> tag because I want hover effects, meaning when I hover on that image the image changes. That's why I use image button.
But, I do not want to use images. I want to use <ul> tag and <div> tag but I am not familiar with how to do hover effect on those tags.
Please help me.
You need to use CSS to do this. If you wish to have a list of buttons, then I strongly suggest you use a ul parent element and then li child elements. Don't use divs inside the ul.
<ul>
<li id='button1'>Button 1</li>
<li id='button2'>Button 2</li>
</ul>
#button1 {background-image: url(IMAGE PATH GOES HERE)}
#button1:hover {background-image: url(HOVER IMAGE PATH GOES HERE)}
The CSS property background-image places whatever image you specify in IMAGE PATH GOES HERE as the background for that element. The :hover pseudo-selector allows you to alter an image when the user hovers it with their mouse. In this case, we are providing a different image path effectively altering the image when the li is hovered.
In case you are not familiar with CSS, you can learn more about it here.
All modern browsers can render :hover CSS selector on every element. You just have to change background-image properties for your <ul> tags then.
But there are many possibilities with javascript, jquery and so on, which will enable you to use it in every browser.
Not sure if I understand but if I do it's this:
ul:hover
{
background-color: #f00;
}
or
div:hover
{
background-color: #f00;
}
About as good an answer I can give considering the question.
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.