www.webdeveloper.com
Results 1 to 11 of 11

Thread: How to make images link to websites created by using the propery background-image

  1. #1
    Join Date
    May 2006
    Posts
    10

    How to make images link to websites created by using the propery background-image

    I created an image made of 4 images by using the background-image property, but I could not associate these images to websites. Tha is I could not make these images to point to websites. Is that possible and if so, how it can be made with css. Thanks for any help. Below is the file that I created:

    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    
    <style>
    h2 {
    border: 1px solid #666;
    border-radius: 20px;
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    background: white;
    padding-top: 72px;
    text-align: center;
    background: url("http://localhost/misc/test1/images/mail.png") top center no-repeat,
    url("http://localhost/misc/test1/images/printer.jpg") 40% 24px no-repeat,
    url("http://localhost/misc/test1/images/gift.png") 60% 24px no-repeat,
    url("http://localhost/misc/test1/images/plane.png") center no-repeat;
    font-family: "Gill Sans", Trebuchet, Calibri, sans-serif;
    color: #666;
    }
    </style>
     
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    </head>
    
    <body>
    
    
    <h2>XXXXXXXX</h2>
    
    </body>
    </html>
    Last edited by sarmad2006; 07-29-2014 at 04:49 PM.

  2. #2
    Now, could you explain that better? Your language and question makes about as much sense as your code -- which is to say none whatsoever.

    I'm not sure what you're trying to accomplish, but I'm pretty sure you shouldn't be using http://localhost in the paths of those files...

  3. #3
    Join Date
    May 2006
    Posts
    10
    I am sorry, you are right I am not going to use localhost. I will explain more...when execute this code you will get a rectangular shape with four images in the middle of the rectangular shape. What I want to learn here: is how to make these images clickable. If this is not clear, please let me know. Thanks

  4. #4
    If they're clickable, they're content... if they're content, they go in a image tag, NOT as CSS... OR if they are presentational affectations of a link, they go in the page using something like gilder-levin image replacement.

    CSS is appearance, not functionality -- you want functionality, use markup NOT style.

  5. #5
    Join Date
    Oct 2013
    Posts
    543
    HTML101:
    <a href="path/to/mypage.htm"><img src="path/to/mypic.jpg"></a>

    CSS201: CSS background images are not "clickable".

    That out of the way, HTML5 allows you to place <a>nchor tags around certain block-level tags such as <h2> -- whether or not deathie (following on to a comment from the other day; yes I have a sense of humor -- and memory ) agrees with it.

    Therefore the following works, but only for the <h2> as a whole. You still cannot make clicking on an individual CSS background image take a user to separate pages/sites.

    HTML Code:
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <style>
    h2 {
    border: 1px solid #666;
    border-radius: 20px;
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    background: white;
    padding-top: 72px;
    text-align: center;
    background: url("http://localhost/misc/test1/images/mail.png") top center no-repeat,
    url("http://localhost/misc/test1/images/printer.jpg") 40% 24px no-repeat,
    url("http://localhost/misc/test1/images/gift.png") 60% 24px no-repeat,
    url("http://localhost/misc/test1/images/plane.png") center no-repeat;
    font-family: "Gill Sans", Trebuchet, Calibri, sans-serif;
    color: #666;
    }
    </style>
     
    <title>Untitled Document</title>
    </head>
    
    <body>
    
    
    <a href="mypage.htm"><h2>XXXXXXXX</h2></a>
    
    </body>
    </html>
    You would be far better off dropping all those images in a <div> and using my HTML101 code above.

  6. #6
    Join Date
    May 2006
    Posts
    10
    Thanks Kevin2 for the insight. I also had a distant imagination in my mind to put those images in separate div(s).

  7. #7
    Join Date
    Oct 2013
    Posts
    543
    One could also lay the <h2> over the <div>(s) using CSS positioning.

    Just a hint.

  8. #8
    I'm just wondering what makes four separate images/links the start of a single new subsection of the H1 preceeding it.

    ... and the whole A around a H2 thing? you could just as easily put the A inside the H2, set it display:block and pretend the H2 doesn't exist... meaning there's no reason to even try putting it around it in the first place.

    Much less that IE and FF still choke on it the other way unpredictably, no matter what HTML 5 says. :P

  9. #9
    Join Date
    May 2006
    Posts
    10
    @deathshadow
    I agree with u it was a confusing idea using H2, therefore, I found a completely different way for achieving this purpose without using the background-image property.

    see the code below: it might help someone

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style>
    #wrapper {
    	position: absolute;
    	width: 318px;
    	height: 168px;
    	z-index: 1;
    	left: 103px;
    	top: 38px;
    	border: 1px solid black;
    	border-radius: 16px;
    }
    #mail {
    	position: absolute;
    	width: 37px;
    	height: 36px;
    	z-index: 1;
    	left: 135px;
    	top: 6px;
    }
    #gift {
    	position: absolute;
    	width: 30px;
    	height: 35px;
    	z-index: 2;
    	left: 28px;
    	top: 57px;
    }
    #plane {
    	position: absolute;
    	width: 98px;
    	height: 75px;
    	z-index: 3;
    	left: 110px;
    	top: 55px;
    }
    #printer {
    	position: absolute;
    	width: 32px;
    	height: 35px;
    	z-index: 4;
    	left: 257px;
    	top: 61px;
    }
    
    </style>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    </head>
    <body>
    <div id="wrapper">
      <div id="mail"><img src="images/mail.png" width="26" height="26" alt="" /></div>
      <div id="gift"><img src="images/gift.png" width="26" height="21" alt="" /></div>
      <div id="plane"><a href="http://yahoo.com" target="_blank"><img src="images/Plane.png" width="101" height="90" alt="" /></a></div>
      <div id="printer"><img src="images/printer.jpg" width="26" height="26" alt="" longdesc="http://hp.com" /></div>
    </div>
    </body>
    </head>
    </html>
    The picture that result from this code is as follows: each object on the picture are easily clickable now. In the above code I made only one object clickable as an example.

    4 images.png

  10. #10
    You've got a wee bit more markup than necessary on that.... mostly in the form of DIV for nothing. Likewise, I'd try to avoid using absolute positioning, it's just not necessary.

    I'd also suggest coding in strict and getting rid of the TARGET attribute that has no business on any website written after 1997 since shoving new windows down users throats just pisses them off, losing the "sizes for nothing" in the CSS... Basically drag it kicking and screaming past 1997 style markup since transitional means "in transition from 1997 to 1998 coding practices" -- tranny is for adding new stuff to old sites, NOT writing new sites.

    I will say it's refreshing to see someone use longdesc properly for once.

    Though you're closing HEAD for a second time for no reason...


    Basically, gut the markup down to something like this:

    Code:
    <div id="wrapper">
    	<a href="#">
    		<img
    			src="images/mail.png"
    			width="26" height="26"
    			alt="Send Mail"
    			id="mail"
    		/>
    	</a>
    	<a href="#">
    		<img
    			src="images/gift.png"
    			width="26" height="21"
    			alt="Give a gift"
    			id="gift"
    		/>
    	</a>
    	<a href="#">
    		<img 
    			src="images/printer.jpg"
    			width="26" height="26"
    			alt="HP Printer"
    			longdesc="http://hp.com"
    			id="printer"
    		/>
    	</a>
    	<a href="http://yahoo.com">
    		<img
    			src="images/plane.png"
    			width="101" height="90"
    			alt="Book a flight"
    			id="plane"
    		/>
    	</a>
    <!-- #wrapper --></div>
    For CSS more along these lines, letting flow do it's job.

    Code:
    #wrapper {
    	overflow:hidden; /* wrap floats and margins*/
    	width:320px; /* also trips haslayout, so floats are wrapped legacy IE */
    	margin:0 auto;
    	padding-bottom:16px;
    	text-align:center;
    	border:1px solid #000;
    	-webkit-border-radius:16px;
    	-moz-border-radius:16px;
    	border-radius:16px;
    }
    
    #wrapper a {
    	text-decoration:none;
    }
    
    #wrapper img {
    	vertical-align:bottom;
    	border:0;
    }
    
    #mail {
    	display:block;
    	margin:16px auto;
    }
    
    #gift {
    	float:left;
    	margin:35px 0 0 16px;
    }
    
    #printer {
    	float:right;
    	margin:32px 16px 0 0;
    }
    Far simpler as we just let flow do it's job instead of micromanaging positioning. We don't even actually need CSS for the "plane" image. The above aligns the 'side' images with the plane instead of the box... adjust the top margins as needed -- 14px and 11px would center them top to bottom in #wrapper.

    Code:
    #gift {
    	float:left;
    	margin:14px 0 0 16px;
    }
    
    #printer {
    	float:right;
    	margin:11px 16px 0 0;
    }
    Generally unless you're doing something like a dropdown menu or gilder-levin image replacement, absolute positioning is sucker-bait.
    Last edited by deathshadow; 07-31-2014 at 12:19 PM.

  11. #11
    Join Date
    May 2006
    Posts
    10
    @deathshadow
    Many thanks for your generous and overflowing css contributions. I will try them in addition to my setup, they are so interesting variations and much more brain moving cdes.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles