I need help to create a image change when hovered over. I am using this image as a button. This is my code:
.button_home {
width: 110px;
height: 50px;
background-image: url(background1.png);
}
.button_home :hover {
background-image: url(background_ov1.png);
}
my html is:
<form action="webpage.HTML">
<input type="image" class="button_home">
</form>
Any help please?
Get rid of the space before :hover
.button_home:hover {
Related
I want to use an image as a button, and that I can do, however I wish to add text on top of the button and don't know how
This is how I want it to look. 1 The image will be the whole and the text would be in the red part
How can I do that?
This is what I have so far:
<form action=".html" method="LINK">
<input type="image" src="cola.png" class="c11"/>
</form>
Image inputs are server side image maps. They are designed to let you click on an image and have the server identify where on the image you clicked.
If you want a regular button, with text, and a background image. Then use that:
<button>Your Text</button>
button {
background-image: url(cola.png);
}
You may with to adjust the height, width, background colour and border of the image too.
Instead of using an input as a button, use a button as a button, with the background set to the image you want, and because you're using a button, you can put text inside it easily.
<button type="submit">Text Goes Here</button>
button {
background-image: url('cola.png');
}
Then you can change the styling on the button to achieve the effect you want.
You can try something like this
<!DOCTYPE html>
<html>
<head>
<style>
button {
background-image: url("/images/driveicon.png");
background-repeat: no-repeat;
color: red;
}
</style>
</head>
<body>
<button type="submit">Click Me!</button>
</body>
</html>
There is many ways to do this:
Approach 1: Background image on div
HTML
<div class="button" onclick="myFunction()">Click me</div>
CSS
.button {
background: url('img.png') no-repeat;
background-size: cover;
background-position: center;
}
JavaScript
function myFunction() {
alert('I was clicked');
}
Approach 2: img tag with onclick
HTML
<div class="imgDiv">
<img onclick="myFunction()" src="img.png" />
<div>Click me</div>
</div>
CSS
.imgDiv {
position: relative;
}
.imgDiv img, .imgDiv div {
position: absolute;
left: 0px; top: 0px;
}
JavaScript
function myFunction() {
alert('I was clicked');
}
I would like to hover over div id-"RollOver1" and be able to change the background to a different image from the main one. Only pasted the HTML for the rollover div cant use jscript so is there a way in HTML or ....?
<div id="RollOver1" style="position:absolute;overflow:hidden;left:152px;top:397px;width:183px;height:183px;z-index:4">
<a href="./car.html">
<img class="hover" alt="" src="images/Enter_02.jpg" style="left: 0px; top: 0px; width: 183px; height: 183px; display: block;">
<span style="display: none;"><img alt="" src="images/index_01.jpg" style="left:0px;top:0px;width:183px;height:183px"></span>
</a>
</div>
You can do this with the following code:
#RollOver1 {
background:url(INITIAL_BACKGROUND);//here use the url of the background you want when is NOT on hover
}
#RollOver1:hover {
background:url(BACKGROUND_ON_HOVER);//here use the url of the bg you want when is on hover
}
You can use :hover pseudo class:
#RollOver1 {
background: url('img1.png');
}
#RollOver1:hover {
background: url('img2.png');
}
But you will usually see "glich" between changes of images, because second image will take some time to be loaded.
To avoid that, use image sprite. Put both images (normal and hover) to single image and than use css background-position
#RollOver1 {
background: url('sprite.png') no-repeat 0 0;
}
#RollOver1:hover {
background-position: -80px -90px;
}
It will be more efficient way to load small images (like buttons, icons and so on).
Check this link
Using JQuery you can try
$(document).on("mouseover", "#RollOver1", function(e) {
$(this).css("background", "url(sampleImage.png) no-repeat");
}
});
use the css pseudo class :hover
You can use below styles
.RollOver1:hover {
background-image: url('paper.gif');
}
I am trying to put an opacity button onto an image. This is my code:
<style>
body
{
background-image:url('http://mysite.com/myimage.jpg');
background-repeat:no-repeat;
}
#submit
{
position: absolute;
top: 354px;
left: 345px;
width: 112px;
height: 35px;
cursor:pointer;
opacity:0;
}
</style>
<input id="submit" type="submit" value="" />
My button image is on the background image that means I only have one image that is mysite.com/myimage.jpg , there is a button image on it. (button image is not a seperate slice).
It works very well in FF or Chrome, but it doesn't work in IE..
Can anyone help me out?
Thanks!
For IE8 and earlier use something like:filter:alpha(opacity=40);
Read more here: http://www.w3schools.com/css/css_image_transparency.asp
I would like to make a button (clickable element) without text but with an image.
I want the image to be defined in the css.
If I use Image element, the image cannot be defined in the css.
Using div looks like irrelevant.
something like:
<elem></elem>
elem {
backround-image:url(img.jpg);
}
How can I do this? What is elem?
You can use a button element by reseting it's defaults CSS, Or use DIV.
Button is more semantic.
Obviously you will still need to add an event handler to the onclick event for it to do something.
Example:
<style>
.myburron{
background-image: url('../myimage.jpeg');
width: Xpx;
height:Ypx;
display: [not sure, think inline-block is best];
border-style: none;
background-color: none;
}
</style>
...
...
...
<button class="myburron"> </button>
HTML:
<input type="button" name="btn" id="btn">
CSS:
#btn{
width: 100px;
height:40px;
}
#btn:hover{
background-image: url('images/button_hover.jpg');
}
#btn:active{
background-image: url('images/button_active.jpg');
}
When onmouseover,it should look like
<input type="image" src="1.jpg" />
When onmouseout,it should look like
<input type="image" src="2.jpg" />
I would keep the <input type=reset> and using Javascript hide it, create an <a> element and style it as much as I please, attach an event handler on click to the anchor to trigger the reset, and use CSS :hover on the anchor so the background image changes. Users without Javascript will see the regular ole' reset button.
Add in your CSS the proper rules for :hover; It should work on everything but IE, which doesn't support hover in any element.
I don't know exactly what you're trying to do, but like Tordek, I would suggest using CSS and :hover
Here's the CSS:
.myButton{
background:url("2.jpg") no-repeat;
width: 200px;
height: 100px;
border: none;
}
.myButton:hover {
background:url("1.jpg") no-repeat;
width: 200px;
height: 100px;
border: none;
}
And here's the HTML:
<input type="submit" class="myButton" value="">
Don't worry about changing the presentation of the reset button itself, make it invisible. Make your own reset button, represented by a link with a hash for a href, and have it invoke the rest button when clicked:
<a href="#" class="resetPush">
<span>Reset</span>
</a>
Coupled with the following javascript:
$("input[type='reset']").hide();
$("a.resetPush").click(function(e){
e.preventDefault();
$("input[type='reset']").trigger("click");
});
And as for the rollover effect of the link, css can handle that for you:
a.resetPush span { display:none; }
a.resetPush { display:block; width:100px; height:25px;
background: url("slider.jpg") left top no-repeat; }
a.resetPush:hover{ background-position: left bottom; }
The <input type="image"> is merely meant to present some kind of a map wherein the end-user would be able to point specific locations in.
But you don't want to do that. You just want a button with a background image. I would thus suggest to replace it by an <input type="reset"> with a CSS background-image which is set to url(path/to/your/image.png). You can then add some Javascript (jQuery maybe? there's a hover function) which changes the CSS class on mouseover and mouseout. For example:
$("#buttonid").hover(
function () {
$(this).addClass('hover');
},
function () {
$(this).removeClass('hover');
}
);
with CSS
#buttonid {
background: url(path/to/your/image.png);
}
#buttonid.hover {
background-position: 20px; /* Make use of CSS sprites. */
}
(more about CSS sprites here)
Some would suggest to use the CSS :hover pseudoclass for this, but that doesn't work in all browsers on other elements than <a>.