Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 11 of 11
  1. #1
    New Coder
    Join Date
    Oct 2011
    Posts
    81
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Clickable background

    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)
    Code:
    <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:

    Code:
    #box1img{
    	background: url('../images/box1img.png');
    	width:210px;
    	height: 257px;
    	margin: 0 18px 0 0;
    	float: left;
    }
    Last edited by apotd; 10-30-2011 at 05:39 PM.

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello apotd,
    Instead of div elements, make those anchors with background images.
    Something like this:
    Code:
    <!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>
    Last edited by Excavator; 10-30-2011 at 03:34 PM. Reason: forgot to clear the floats
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    New Coder
    Join Date
    Oct 2011
    Posts
    81
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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:

    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.

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    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 that may help you.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #5
    New Coder
    Join Date
    Oct 2011
    Posts
    81
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Hurray, the image hover works fine now!

    Still having some problems with hover in my header though.

    Code:
    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?

  • #6
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    What does your markup for the h1 anchor look like?
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #7
    New Coder
    Join Date
    Oct 2011
    Posts
    81
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Code:
    	<header>
    		<a href="#"><h1>title</h1></a>
    	</header>

  • #8
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    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:
    Code:
    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;}
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #9
    New Coder
    Join Date
    Oct 2011
    Posts
    81
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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?

  • #10
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by apotd View Post
    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.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #11
    New Coder
    Join Date
    Oct 2011
    Posts
    81
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thank you, this made everything quite more clear. All problems have been solved for now!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •