I'm a super beginner at web development and I have a question about trying to "swap" two images.
I have this CSS and markup written but for some reason it does not seem to be working. The second image that's supposed to swap in when hovering over the first image simply lies on top of the first image on the page.
CSS:
.home {
margin: 0;
padding: 0;
background: url('images/onhome.png') no-repeat;
}
.home a, .nav a:link, .nav a:visited {
display: block;
width: 90px;
height: 25px;
}
.home a:hover img {
visibility: hidden;
}
HTML:
<div class="home">
<a href="#">
<img src="style/images/home.png" width="65" height="18" alt="" />
</a>
</div>
I'm not sure what's going wrong, and I'd be very appreciative if someone can help me. If there's another better way to do this, I would be definitely open to that too.
One way to do it is to forget the <img>, and on :hover change the background-image URL.
#home {
background: url(http://images.nationalgeographic.com/wpf/media-live/photos/000/005/cache/grey-wolf_565_600x450.jpg) no-repeat;
height: 600px;
width: 600px;
}
#home:hover {
background: url(http://25.media.tumblr.com/tumblr_m6fmnhxL3B1r7wu2mo1_500.jpg) no-repeat;
}
Working example: http://jsfiddle.net/c9sRa/
If you put your cursor over the wolf it will change to a picture tiger cubs :-)
Related
I've built a site with TYPO3 (4.7.2) which has a nice graphical menu on the right hand side (see here). But this is not so user-friendly nor is it easy to maintain, as it is a bit of a hack and doesn't use "Typo3-Standards", but just some general HTML/CSS-hacking:
the menu's html is:
<p id="kat">
<a target="_blank" href="http://www.fusspflege.com/elkat/op/">
<img src="/fileadmin/images/baehr_katalog2.png" />
</a>
</p>
and the corresponding CSS:
#kat a {
background: url("/fileadmin/images/baehr_katalog2_hover.png") no-repeat;
display:block; height:120px; width:220px; /* Linkbereich begrenzen */
}
#kat img {
display:block; width:220px; height:120px; border:0;
}
#kat a:hover img {
visibility: hidden;
}
So basically I show the image with white font in "standard mode" and when the mouse hovers, that image is hidden and the same image (with black font) in the background becomes visible. I thought this was quite nice, and it did not need any JS :-)
But I'm wondering if there is a way to do this more elegant, robust and user-friendly (perhaps with TYPO's tools?), so that the user could change images if needed without having to worry about CSS...
edit: I found a solution requiring one image! (Text is in transparent colour and the CSS has this:
#kat a:hover img {
background-color: black;
}
But still I wonder if there's not a more TYPO-esque solution around? ;-)
If you don't use text links (only image) you are able to switch properties like this:
#kat a {
text-decoration: none;
display: block;
width: 220px;
}
#kat a img {
border: 0;
max-width: 100%;
height: auto;
display: block;
opacity: .5;
}
#kat a:hover img {
opacity: 1;
transition: opacity 1s ease 0s;
}
<p id="kat">
<a target="_blank" href="http://www.fusspflege.com/elkat/op/">
<img src="http://lorempixel.com/440/220"/>
</a>
</p>
As edited in the q, I found a solution:
Text is in transparent colour and the CSS has this:
#kat a:hover img {
background-color: black;
}
(In order to avoid issues created by non-CI fonts and to maintain good looks etc., I prefer captions as part of img vs. CSS-styled text.)
I have a table of roll over images / links, for which I was hoping to use a sprite for but for some reason when the code goes live only around half of the images display.
My code is here if anyone wants to look at it in the wild:
http://www.geckosourcing.co.uk/ebay/Promotions/Cross_Promotion.html
http://www.geckosourcing.co.uk/ebay/Promotions/Cross_Promotion.css
HTML:
<td height="88" width="88"><a class="1000AQwpanel" href="http://goo.gl/mOu8L">1000 Wetroom Panel</a></td>
CSS:
.1000AQwpanel {
display: block;
width: 88px;
height: 88px;
background: url('http://www.geckosourcing.co.uk/ebay/Promotions/Promotion_Sprite.jpg') -704px 880px;
text-indent: -99999px;
}
.1000AQwpanel:hover {
background-position: -704px 792px;
}
The think that has been getting me as this code looks the same as the sections that work. If anyone can show where I am going wrong it would save me pulling my hair out.
Thanks
I suspect this is due to class names that start with a number:
class="760Corner"
Valid class names must begin with a letter, underscore or hyphen.
class / id names may not start with a number. Html wil valid the code, it's the css that gives the problem.
You can use a different style of css to go around this.
css
a[class="760corner"]{
}
PS.
Why do you have the text inside your image? Try putting text in a span like this
HTML
<a class="corner-760">
<span>Your text</span>
</a>
css
a {
display: block;
position: relative;
background: url('../images/.....jpg');
width: 80px;
height: 80px;
}
a > span {
display: block;
text-align: center;
height: 100%;
}
a:hover > span {
display: none;
}
a.corner-760 {
background-position: ........;
}
I have an image that is a link. I want to show a different image when the user hovers over the link.
Currently I'm using this code:
<a href="http://twitter.com/me" title="Twitter link">
<div id="twitterbird" class="sidebar-poster"></div></a>
div.sidebar-poster {
margin-bottom: 10px;
background-position: center top;
background-repeat: no-repeat;
width: 160px;
}
#twitterbird {
background-image: url('twitterbird.png');
}
#twitterbird:hover {
background-image: url('twitterbird_hover.png');
}
But I'm having loads of problems: the div isn't picking up the CSS rules (the element just isn't showing the related CSS rules when I view it in Firebug).
Perhaps this is because (as I know) this is invalid HTML: you can't put an <a> around a <div>. However, if I switch to <span> then it seems I get bigger problems, because you can't set a height and width on a span reliably.
Help! How can I do this better?
use a class for the link itself and forget the div
.twitterbird {
margin-bottom: 10px;
width: 160px;
height:160px;
display:block;
background:transparent url('twitterbird.png') center top no-repeat;
}
.twitterbird:hover {
background-image: url('twitterbird_hover.png');
}
If you have just a few places where you wish to create this effect, you can use the following html code that requires no css. Just insert it.
<a href="TARGET URL GOES HERE"><img src="URL OF FIRST IMAGE GOES HERE"
onmouseover="this.src='URL OF IMAGE ON HOVER GOES HERE'"
onmouseout="this.src='URL OF FIRST IMAGE GOES HERE AGAIN'" /></A>
Be sure to write the quote marks exactly as they are here, or it will not work.
The problem with changing it via JavaScript or CSS is that if you have a slower connection, the image will take a second to change to the hovered version. This will cause an undesirable flash as one disappears while the other downloads.
What I've done before is have two images. Then hide and show each depending on the hover state. This will allow for a clean switch between the two images.
<a href="/settings">
<img class="default" src="settings-default.svg"/>
<img class="hover" src="settings-hover.svg"/>
<span>Settings</span>
</a>
a img.hover {
display: none;
}
a img.default {
display: inherit;
}
a:hover img.hover {
display: inherit;
}
a:hover img.default {
display: none;
}
That could be done with <a> only:
#twitterbird {
display: block; /* 'convert' <a> to <div> */
margin-bottom: 10px;
background-position: center top;
background-repeat: no-repeat;
width: 160px;
height: 160px;
background-image: url('twitterbird.png');
}
#twitterbird:hover {
background-image: url('twitterbird_hover.png');
}
It can be better if you set the a element in this way
display:block;
and then by css sprites set your over background
Edit: check this example out http://jsfiddle.net/steweb/dTwtk/
You could do the following, without needing CSS...
<img src="URL_OF_FIRST_IMAGE_SOURCE" onmouseover="this.src='URL_OF_SECOND_IMAGE_SOURCE'" onmouseout="this.src='URL_OF_FIRST_IMAGE_SOURCE_AGAIN'" />
Example: https://jsfiddle.net/jord8on/k1zsfqyk/
This solution was PERFECT for my needs! I found this solution here.
Disclaimer: Having a solution that is possible without CSS is important to me because I design content on the Jive-x cloud community platform which does not give us access to global CSS.
If you give generally give a span the property display:block, it'll then behave like a div, i.e you can set width and height.
You can also skip the div or span and just set the a the to display: block and apply the backgound style to it.
<!---->
<style>
.myImage {display: block; width: 160px; height: 20px; margin:0 0 10px 0; background: url(image.png) center top no-repeat;}
.myImage:hover{background-image(image_hover.png);}
</style>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Change Image on Hover in CSS</title>
<style type="text/css">
.card {
width: 130px;
height: 195px;
background: url("../images/pic.jpg") no-repeat;
margin: 50px;
}
.card:hover {
background: url("../images/anotherpic.jpg") no-repeat;
}
</style>
</head>
<body>
<div class="card"></div>
</body>
</html>
I'm just trying to use this little trick I saw in one of my web design magazines to make a little image rollover but I'm having just a small bit of trouble. My attempt was a terrible fail lol. I just want to see the top half (42px tall) and then the bottom half on rollover (-42px obviously)
width is also 42px. Could someone write something up to make that happen?
image:
http://img826.imageshack.us/img826/6568/homebi.png
It's all about the initial (non-:hover) and final (:hover) values of background-position.
#test {
height: 42px;
width: 42px;
background-image: url(http://img826.imageshack.us/img826/6568/homebi.png);
background-repeat: no-repeat;
background-color: transparent;
background-position: top; /* <-- key step #1 */
}
#test:hover {
background-position: bottom; /* <-- key step #2 */
}
Demo
As per your comment re: wrapping the <div> with an anchor (<a>), here's what to do:
Swap the <div> out for a <span>. This is because valid children of anchors must be inline elements
But inline-displayed elements won't behave accept dimensions! So, fix this new problem with one additional CSS property: display: inline-block on the span.
Demo 2
Try this:
<style type="text/css">
.menu {
}
.menu a {
float: left;
display: inline;
width: 42px;
height: 42px;
text-decoration: none;
}
.menu a span {
display: block;
overflow: hidden;
height: 0;
}
.menu .home {
background: transparent url(http://img826.imageshack.us/img826/6568/homebi.png) 0 0 no-repeat;
}
.menu .link:hover {
background-position: 0 -42px;
}
</style>
<div class="menu">
<span>Home</span>
</div>
Heres the bare bones for an image rollover.
the css
.rollover{display:block; height:42px; width:42px; background:url(http://img826.imageshack.us/img826/6568/homebi.png) top;}
.rollover:hover{background-position:bottom;}
.rollover span{display:none}
The html
<span>Home</span>
The important part is the background position, which on the buttons normal state is set to 'top', when you rollover the background postion is 'bottom'.
Assuming your image which contains both button states is 84px high this will work fine.
I have a CSS entry that looks like this:
.header {
background-image: url("./images/embouchure.jpg");
background-repeat: no-repeat;
height:160px;
padding-left:280px;
padding-top:50px;
width:470px;
color: #eaeaea;
border-bottom:1px solid #eaeaea;
}
How can I add the link to the the background image in that CSS?
The full CSS can be found here and the html that uses is there.
Try wrapping the spans in an anchor tag and apply the background image to that.
HTML:
<div class="header">
<a href="/">
<span class="header-title">My gray sea design</span><br />
<span class="header-title-two">A beautiful design</span>
</a>
</div>
CSS:
.header {
border-bottom:1px solid #eaeaea;
}
.header a {
display: block;
background-image: url("./images/embouchure.jpg");
background-repeat: no-repeat;
height:160px;
padding-left:280px;
padding-top:50px;
width:470px;
color: #eaeaea;
}
Using only CSS it is not possible at all to add links :) It is not possible to link a background-image, nor a part of it, using HTML/CSS. However, it can be staged using this method:
<div class="wrapWithBackgroundImage">
</div>
.wrapWithBackgroundImage {
background-image: url(...);
}
.invisibleLink {
display: block;
left: 55px; top: 55px;
position: absolute;
height: 55px width: 55px;
}
You can not add links from CSS, you will have to do so from the HTML code explicitly. For example, something like this:
<li id="header"></li>