...

View Full Version : Resolved Clickable background



apotd
10-30-2011, 01:41 PM
I'm pretty new to all the HTML & CSS stuff, so sorry if I ask something stupid.

I'm trying to make a webpage with three clickable images, and when you hover over the images, they should change to another image. But before I can do the whole hover thing, I must know how to turn these images into clickable links first, since they are background images.

I made this HTML structure so far:
(part)

<body>

<header>
<h1>title</h1>
</header>

<div id="container">
<div id="box1img">
</div>
<div id="box2img">
</div>
<div id="box3img">
</div>
</div>

<footer>
</footer>

</body>

</html>

the CSS for each image/box:


#box1img{
background: url('../images/box1img.png');
width:210px;
height: 257px;
margin: 0 18px 0 0;
float: left;
}

Excavator
10-30-2011, 04:24 PM
Hello apotd,
Instead of div elements, make those anchors with background images.
Something like this:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<style type="text/css">
html, body {
margin: 0;
font: 100% "Trebuchet MS", Arial, Helvetica, sans-serif;
color: #000;
background: #fc6;
}
/* HTML5 tags */
header, section, footer,
aside, nav, article, figure {display: block;}
#container {
width: 800px;
margin: 0 auto;
background: #999;
overflow: auto;
}
#box1img,
#box2img,
#box3img {
height: 257px;
width: 210px;
margin: 0 18px 0 0;
float: left;
display: block;
}
#box1img{background: url('../images/box1img.png');}
#box2img{background: url('../images/box1img.png');}
#box3img{background: url('../images/box1img.png');}
</style>
</head>
<body>
<header>
<h1>title</h1>
</header>
<div id="container">
<a href= "#" id="box1img"></a>
<a href= "#" id="box2img"></a>
<a href= "#" id="box3img"></a>
<!--end container--></div>
<footer>
</footer>
</body>
</html>

apotd
10-30-2011, 05:22 PM
Thank you so much! Never thought of that but it works like a charm.

I have one more question, I tried to change the image on hover using the following code:


#box1img a:hover{
background: url('../images/box1imghover.png');
}

but this does not work. I'm kind of confused by the link and hover stuff, I tried to make a hover for my header a few hours ago but this didn't work either.

Excavator
10-30-2011, 05:39 PM
Since we gave your anchor an id the correct syntax would be more like this -
a#box1img:hover {background: url('../images/box1imghover.png');}

I have a CSS rollover demo here (http://nopeople.com/CSS%20tips/CSS_rollover/index.html) that may help you.

apotd
10-30-2011, 05:55 PM
Hurray, the image hover works fine now!

Still having some problems with hover in my header though.


h1{
font-family: Museo700;
font-size: 56px;
font-weight: normal;
color: #ffffff;
text-shadow: 2px 2px 2px #000000;
text-decoration: none;
}

a h1{
text-decoration: none;
}

a h1:hover{
color: #cccccc;
text-decoration:none;
}

When I hover over the text, I do get my grey text (#cccccc), but the text has underscore, in its normal state and the hover state. I thought I'd be able to fix this with the text-decoration, but it's not working?

Excavator
10-30-2011, 06:04 PM
What does your markup for the h1 anchor look like?

apotd
10-30-2011, 06:12 PM
<header>
<a href="#"><h1>title</h1></a>
</header>

Excavator
10-30-2011, 06:18 PM
Your CSS is changing the look of the h1 on hover, simple enough so far.
It gets a little more complicated because the underline is not on the h1, it's on the anchor.

You can get rid of the underline like this:


h1 {
font-family: Museo700;
font-size: 56px;
font-weight: normal;
color: #ffffff;
text-shadow: 2px 2px 2px #000000;
text-decoration: none;
}
header a{text-decoration: none;}
a h1:hover{color: #ccc;}

apotd
10-30-2011, 06:25 PM
Makes sense if you think about it that way. Works perfectly now.

One more thing though, why does it have to be:
"header a" and not "a header", when it's also
"a h1:hover" and not "h1:hover a" or something?

Excavator
10-30-2011, 06:33 PM
Makes sense if you think about it that way. Works perfectly now.

One more thing though, why does it have to be:
"header a" and not "a header", when it's also
"a h1:hover" and not "h1:hover a" or something?

It's the order of your markup.
header contains a
a contains h1

You could just say a too. Being more specific by saying header a keeps the css so it only applies to anchors contained in header.
When you need to get even more specific, you can give each anchor contained in header it's own id.

apotd
10-30-2011, 06:38 PM
Thank you, this made everything quite more clear. All problems have been solved for now!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum