Here is my HTML.
<html>
<head>
<style type="text/css">
.button {
background: url('images/1.png');
}
.button:hover {
background: url('images/2.jpg');
}
</style>
</head>
<body>
<img class="button" src="images/1.png">
</body>
</html>
The files are present but it still doesn't work. What am I doing wrong?
The standard method is CSS:
input.mybutton { background-image: url('button.jpeg'); }
input.mybutton:hover { background-image: url('selectedButton.jpeg'); }
Using JavaScript, you can overwrite the .src of an image:
imageElement.src = 'selectedButton.jpeg';
<img src="button.jpeg" onmouseover="this.src='selectedButton.jpeg'" onmouseout="this.src='button.jpeg'"/>
Probably the best way is to use css and set the background image of the element based on the hover property.
If you can use jQuery in your application then it will be fairly simple.On mouseover event of the button just swap the background image.Following sample code does it for a div element :-
<div class="title"/>
$(document).ready(function () {
$('div.title').mouseover(function () {
$(this).css("background-image", "url('Forest Flowers.jpg')");
});
});
Use javascript to do this. Use onmouseover and onmouseout events to handle this.
If you can use jQuery then you can use the hover event.
$("img.button").hover(function(){
$(this).attr("src","path of image on mouse over");
},
function(){
$(this).attr("src","path of image on mouse out");
});
Use a tag to wrap the image.
<hmtl>
<head>
<style type="text/css">
a.button{
background: url('images/1.png');
display:block;
width: *width*;
height: *height*;
}
a.button:hover{
background: url('images/2.jpg');
}
</style>
</head>
<body>
<a class="button"></a>
</body>
Edit: I just realize that you are trying to replace the background image under your image....
one option that you have is to use javascript. but if you want to use only CSS and alse want to use this image as control, the above edited solution is good.
I used an h1 tag. I have tested the following code in IE8,Firefox,GoogleChrome and it is working, we just need to add the doctype correctly:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
.button {
background: url('images/1.jpg');
height: 400px;
width: 400px;
}
.button:hover {
background: url('images/2.jpg');
}
</style>
</head>
<body>
<h1 class="button"></h1>
</body>
</html>
Images don't generally have background images. Use a different element, and non-relative paths would probably be a good idea, too.
Buttons do not have a hover state. You might want to try A (link) tags, and set the background there.
Related
How can I make a scrollbar for my page that appears when I place my cursor at the corner ?
I found out a way to make the scrollbar appear and disappear on hover by using the following:
div { overflow:hidden;height:whatever px; }
div:hover { overflow-y:scroll; }
But that only applies to div tags. I want the scroll-bar to appear only when I take my cursor at the right edge of the page. I tried using body instead of div but then it disturbs all the pages even to those which have less contents.
Please suggest me a way to do so.
what i have understood is that you want something like this
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Liveweave</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('.right').hover(function(){
$('.box').css('overflow-y','scroll');
},function(){
$('.box').css('overflow','hidden');
});
});
</script>
<style type="text/css">
.box
{
overflow:hidden;
width: 100px;
height: 100px;
background-color: yellow;
overflow: hidden;
}
.box:hover
{
/*overflow-y:scroll;*/
}
.body{width:100%}
.right{float:right;min-height:50px;position:absolute;right:0}
</style>
</head>
<body>
<div class="body">
<div class="right">
right edge
</div>
<div class="box">asdfsadfsdafsdafsdaf,
sdfsdfsdfsdfsdfsd
sadfsd
sdf
sadf
sdf
dsf
sdfdsfsdfsdfsdfsdfsdaf
sdffsdf</div>
</body>
</html>
I have a HTML of
<span> Day Month </span>
and for CSS I want to target Day seperately and Month seperately (apply different styles to them) without changing the HTML.
How can I do it?
Yeah its possible. You can follow this method.
Here font-word is not posible, that have no option in css. But we use content css property
<!DOCTYPE html>
<html>
<head>
<style>
span {
color: orange;
}
span:before
{
color: red;
content: "Day";
position: absolute;
}
</style>
</head>
<body>
<span>Day Month </span>
</body>
</html>
Updated: Here the fiddle Demo
ive been watching a tutorial that has told me to change the background color of a webpage by using:
body {background-color:red;}
however when i try and load the page in google chrome the background remains white?
This is my full code:
<!doctype html>
<html> <!--Document START-->
<head> <!--Head START-->
<title>Page Title</title>
<style type="text/css"> <!--CSS START-->
body { background-color:red }
</style>
</head>
<body> <!--Body START-->
<h1>Page Title</h1>
</body>
</html>
The problem is you have an html comment within your css.
<style type="text/css"> <!--CSS START-->
Remove the <!--CSS START--> and it will work fine.
If you want to add comments within css then you can use /* */, e.g:
<style type="text/css">
/* CSS START */
This works for you.
body {
background:red;
}
Ahhh yes, the problem is you have a html comment in the css, so it will not work after: –
Should be:
body { background-color:red; }
(You forgot the ; after "red")
Is it possible to inline a class definition of CSS inside an xhtml file?
I mean, to put someting like:
p.first{ color: blue; }
p.second{ color: red; }
Inside my page, not in a separate CSS file.
I think you're trying to put your CSS in the HTML page, not inline.
You can put CSS in an HTML page (usually in the head) by surrounding it in style tags:
<style type="text/css">
p.first{ color: blue; }
p.second{ color: red; }
</style>
Sure, here's an example. However, it is best practice to keep your styles in a separate css file.
<html>
<head>
<title>Classes</title>
<link rel="stylesheet" type="text/css" href="css/styles.css"/>
<style type="text/css">
img {
padding:10px;
margin:5px;
border:1px solid #d5d5d5;
}
div.thumb {
float:left;
}
div.caption {
padding-left:5px;
font-size:10px;
}
</style>
</head>
<body>
<div>your page code etc..</div>
</body>
</html>
You can also put css inside the p tag.
<html>
<body>
<p class="first" style="color:blue;"></p>
<p class="second" style="color:red;"></p>
</body>
</html>
The nice thing about CSS is it works in any file not just an HTML,XML file. You just need to define the syle block like this anywhere in the page
<style type="text/css">
<all my styles goes here>
</style>
In HTML and HTML/XHTML, the standard is, you will put this block in the head section. If it is other type of file for example .aspx, or .php, the block still works, even it is not in head block.
Example
<?php
/* mytest.php file */
<style>
<my styles>
</style>
?>
the same is true for ASPX file.
You can also define inline CSS which means CSS goes right in the element tag. The syntax is
<p style="<all my styles>"> My paragraph contain inline CSS</p>
Yes, you can insert CSS styles in the HTML file. For example:
<p>...</p>
<style type="text/css">
p.first { ... }
</style>
<div>...</div>
As you'll find in the literature, it's not considered a good practice though.
Is there a way to apply the ::selection and ::-moz-selection CSS pseudo-elements to the text inside a textarea?
textarea::selection {
color: #ff0000;
}
Isn't working
According to this, it should work.
Can you try giving it an !important?
Can you try applying it to a different element than a textarea, e.g. a div? If it works there, it works differently for input elements - but I can't find any resources mentioning that.
Updated as you said here, I'll update this question too:
I disagree. It is working ;)
Tested on Firefox 4.0b6
I can confirm the following code works at least under Firefox 4.0b6 (Taken from my own answer)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Test</title>
<style type="text/css">
p::-moz-selection, input::-moz-selection, textarea::-moz-selection {
color: red;
background-color: grey;
}
</style>
</head>
<body>
<p>This paragraph is selection-aware.</p>
<form action="#">
<input type="text" id="itext" value="So is this input[text]" />
<textarea id="itextarea">And this textarea, as well</textarea>
</form>
</body>
</html>
It may not be wroking programmatically, if you are not careful with what you are doing. Maybe you are trying to select something with jQuery.select() and you are selecting the textarea object instead of its content.