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');
}
Related
Here I'm trying to change the CSS variable's value (visibility) when the button is clicked on (using :focus) to show/hide the images, without using Javascript.
CSS
img {
width: 200px; height: 200px; margin-left: 40px; margin-top: 30px;
}
:root {
--c1-vsb: none; --c2-vsb: none;
}
a.c1-imgs {
visibility: var(--c1-vsb);
}
a.c2-imgs {
visibility: var(--c2-vsb);
}
#C1:focus {
background-color: red;
--c1-vsb: hidden;
}
#C2:focus {
background-color: red;
--c2-vsb: hidden;
}
HTML
<html>
</head>
<body>
<div id="left-panel">
<button class="lp-btn" id="C1">SEAL 1</button><br>
<button class="lp-btn" id="C2">SEAL 2</button><br>
</div>
<div id="right-panel">
<a class="c1-imgs"><img src="https://files.worldwildlife.org/wwfcmsprod/images/HERO_harbor_seal_on_ice/hero_full/87it51b9jx_Harbor_Seal_on_Ice_close_0357_6_11_07.jpg"></a>
<a class="c2-imgs"><img src="https://www-waddensea-worldheritage-org.cdn.gofasterstripes.download/sites/default/files/styles/inline_image_full_width/public/20-11-09_habour%20seals%20report_TTF_5200.JPG?itok=YZs9c_dH"></a>
</div>
</body>
</html>
But for some reasons, when I clicked on the button to set visibility to hidden, the images do not get hidden away.
Previously, I tried hiding the images with css pseudo classes and display:none, z-order... but got stuck. In the end, I thought this should have been the simple way out.
Could you suggest a solution to this problem I'm having? I'm not too sure if this is the correct approach.
Thank you!
When you declare #C1:focus { --c1-vsb: hidden; }, the new value of --c1-vsb only applies to #C1, not the entire HTML document.
As MDN states: "[...] the selector given to the ruleset defines the scope that the custom property can be used in".
With css, you can only Show/hide with mouse handle. You don't change 2 state (Show/Hide) when click into button.
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 create a link out of the following so that the image is clickable.
What would you do to get the background-image clickable?
HTML: (Displays an Image which I would like clickable)
<div class="some_image">
</div>
CSS:
.some_image{
width: 200px;
height:100px;
background-image: url(../images/image.png);
}
You can't make a background image clickable with HTML alone. It's a property of an element and not an element itself. Simply wrap the div in an anchor. This is permissible in HTML5 spec.
More info
Of course, you could simply style the anchor:
.some_image {
display: block;
width: 200px;
height:100px;
background-image: url(../images/image.png);
}
<a class="some_image" href=""></a>
You can't do this traditionally however you may achieve the effect with hacky techniques:
#heatSpot {
position: absolute;
left: 20px; // over area of bg image
top: 10px; // over area of bg image
cursor: pointer;
}
then just fire the link or whatever your trying to do onClick with either wrapping above element in <a> tag -- or using jQuery / JavaScript.
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
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>.