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');
}
Related
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 would like to change the background image of a div by hover a button. This is my key:
.content-portfolio {
background-image: url(../files/portfolio/event.jpg) no-repeat;
}
#event-button a:hover{
}
I dont really know how to do it, I hope you help me!
Best regards!
It's pretty hard to do just with css. You probably could use some javascript to do that. But, I found a way to do what you want if your div was an immediate sibling of your button (with no other elements between the two).
The code would look like this:
HTML
<input type="button" id="btn" value="Click me !" />
<div id="testDiv">
<p>Some content</p>
</div>
CSS
#btn:hover + #testDiv {
background-color: red;
}
#testDiv {
border-style: solid;
width: 200px;
height: 200px;
}
The operator "+" or "~" will apply the css to the next sibling element.
Here's a JS Fiddle that show you the tricks.
If you just remove the "+" it will apply the css to descendant/child of the left element. For more information you can check out this page.
I think that you want to change .content-portfolio's background when you hover on event-button right? You get it right by giving the button an id and not a class, but you can't affect other elements with css selectors if they're not related in some way. Alternatively, it's easier to affect other elements if they have ids instead of classes, specially if they don't have any kind of hierarchy. You'll need to use a javascript solution for this (fiddle here):
HTML:
<a href="javascript:img()">
<div id="EventButton">Click me to change the bg</div>
</a>
<div id="ContentPortfolio">I'm the content</div>
CSS:
#ContentPortfolio {
width: 200px;
height: 100px;
background: red;
}
#EventButton {
width: 100px;
height: 50px;
border: 1px solid grey;
}
Javascript:
function img() {
if (ContentPortfolio.style.backgroundImage == 'url(http://goo.gl/PMqslv)') {
ContentPortfolio.style.backgroundImage = 'url(http://goo.gl/AJm0rS)';
} else {
ContentPortfolio.style.backgroundImage = 'url(http://goo.gl/PMqslv)';
}
return false;
}
In this approach I changed your id names so I can refer to them directly, instead of using the document.getElementById, but if your name contains dashes - or if this doesn't work on your browser, you should use the before mentioned function.
try this
.content-portfolio{width:400px; height:400px; background:url(http://somdow.com/images/sitePortThumbs/saia-sushi-ft-lauderdale-sushi-bar.jpg);}
.content-portfolio:hover{width:400px; height:400px; background:url(http://somdow.com/images/sitePortThumbs/2882films-video-production.png);}
PS: here is the fiddle[ http://jsfiddle.net/somdow/d2Yf9/ ]
,the images are from my own website, obviously just change the url to your own.
Edit: Essentially, from the code i added, you dont need any of it, all you need to do is the same thing you did, just change the url on the hover and you are set to go.
Perhaps you want to change background image of .content-portfolio this is the way to do it:
.content-portfolio:hover {
background-image: url(../files/portfolio/event.jpg) no-repeat;
}
see this: http://jsfiddle.net/y8tRd/
You need jQuery.
Create two classes and add two jquery methods to your button. One css class with the hover image and another class without.
jQuery
$(document).ready(function() {
$("#your-button").on("mouseover", function(){
$("#content-portfolio").toggleClass("back2");
}).on("mouseout", function(){
$("#content-portfolio").toggleClass("back2");
});
});
CSS
.back1 {
background-image: url(../files/portfolio/event.jpg) no-repeat;
}
.back2 {
background-image: url(../files/portfolio/event2.jpg) no-repeat;
}
You can do something like this (You will need jquery):
html
<body>
<button id="button" >Change Background</button>
<div class="content-portfolio">your content</div>
</body>
css
.content-portfolio{
background-image: url('path/to/your/image.jpg') no-repeat;
}
js
$(document).on('mouseenter','#button',function(){
$('.content-portfolio').css('background','path/to/your/image.jpg');
});
$(document).on('mouseout','#button',function(){
$('.content-portfolio').css('background','path/to/your/otherimage.jpg');
});
Also you can create two classes with different backgrounds, and you can add or remove class through jquery
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 {
I'm trying to show a simple button, with an image on it, like this:
<button type="button" style="width: 23px; height: 23px; padding:0">
<img src="Icon_304.png" />
</button>
The button looks right in Chrome, but is off a bit in Firefox—it's not horizontally centered, but skewed to the right. A FF screenshot is below. How can I get the image to be centered (like it is in Chrome by default)? I tried adding a margin: 0 to the img, to no avail.
The best way to do this is not to set the dimensions of the button, but to simply rely on padding. Obviously you should put these styles into a style sheet, as shown below.
DEMO: http://jsfiddle.net/QgTkt/4/
.tallButton {
padding: 50px 10px;
}
.wideButton {
padding: 10px 50px;
}
.equalButton {
padding: 10px;
}
<button type="button" class="equalButton">
<img src="http://dummyimage.com/32x32/ff0/000">
</button>
<br /><br /><br />
<button type="button" class="wideButton">
<img src="http://dummyimage.com/32x32/ff0/000">
</button>
<br /><br /><br />
<button type="button" class="tallButton">
<img src="http://dummyimage.com/32x32/ff0/000">
</button>
You can also set absolute position for the image and negative translate, this way you are able to set any size of the button without changing the padding again.
.tallButton{
position:relative;
width:200px;
height:200px;
}
.tallButton img {
position:absolute;
top: 50%;
left:50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
http://jsfiddle.net/QgTkt/292/
Set the image as background image of the button.
<button class="enjoyable"></button>
.enjoyable {
background-image: url("./icon.png");
background-position: center;
background-repeat: no-repeat;
background-size: contain;
}
Demo: http://jsfiddle.net/x7j4o0uh/1/
I threw this together pretty quickly, so it still needs some tweaking, but you can give this a shot... http://jsfiddle.net/GGXaP/3/
This script (using jQuery) handles the user interaction by adding/removing CSS classes as needed:
(function($) {
$(document).ready(function() {
$('.imageButton').hover(function() {
$(this).addClass('hover');
}, function() {
$(this).removeClass('hover');
});
$('.imageButton').mousedown(function() {
$(this).addClass('mouseDown');
});
$('.imageButton').mouseup(function() {
$(this).removeClass('mouseDown');
});
});
}(jQuery));
Then it's just a matter of setting up CSS to make the button look the way you like. The one in my example is pretty rough (I'm a "make it work" guy - not a "make it pretty" guy), but it's a start.
To solve this issue on Chrome I just added align-items : center on my button.
By default Chrome sets align-items : flex-start on all buttons, which aligns all elements inside the button on the left side, by overloading this property the picture inside my button is now centered.
Instead of giving height or width to button or image give padding to button so it will align that image to center
<button type="button" style="padding:10px">
<img src="test/images/searchIcon.png">
</button>
button {
display: grid;
align-items: center;
}
Inspiration: [1]
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');
}