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 3 of 3
  1. #1
    Regular Coder
    Join Date
    Feb 2010
    Posts
    130
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Top area of background image clickable?

    The code that surrounds the background image:

    Code:
    <body class="<?php echo OsBrowser::getCssClass(); ?>">
    	<div id="back">
    	<a title="Crystal Saga" href="http://cs.r2games.com"></a>
    	</div>
    		<!-- Top -->
    		<a name="top" id="top"></a>
    		<div class="topbg"></div>
    		
    		<!-- Wrapper // -->
    		<div class="wrapper">
    			<!-- Header // -->
    			<div class="header">
    This code is what creates the background image:

    Code:
    	<div id="back">
    	<a title="Crystal Saga" href="http://cs.r2games.com"></a>
    	</div>
    Here's my css:

    Code:
    	#back {
        height: 900px;
        position: absolute;
        text-indent: -9999px;
        width: 100%;
        z-index: 0;
    	}
    	
    	#back a:link {
        background: url('img/gameinfo_bg.jpg') scroll center top;
        display: block;
        height: 100%;
        width: 100%;
    	}
    Now, my question is how do I make it so that it acts like the background image on mmorpg.com where the top section of the background image is clickable?

  • #2
    Regular Coder Lerura's Avatar
    Join Date
    Aug 2005
    Location
    Denmark
    Posts
    907
    Thanks
    0
    Thanked 119 Times in 118 Posts
    on mmorgp.com you are not click the background image.
    You are clicking a <a>

    Usually you need some text or a picture within a link to make it display.

    What they have done is that they have made the <a> a block element, with specific height and width:
    Code:
    <a href="" style="display:block;height:138px;width:980px"></a>
    by making it a block element an area is now assigned to the link, even if it does not have any content.

    It now acts as a combination of a link and an empty <div>,, so it can be positioned and sized like an empty div, while keeping its function as a link

  • #3
    Regular Coder
    Join Date
    Feb 2010
    Posts
    130
    Thanks
    4
    Thanked 0 Times in 0 Posts
    I solved the problem. Basically, I had to alter the code up a bit. The theme I am using for my site uses a a header class that basically pushes the content area below the main and submenus. The header area class was preventing the top area of the background image to not be clickable even if I had the code done correctly. So what I had to do was remove the <a> code from the div so that only the div was there and the background image would show up but no link and then I copied the div and <a> code and pasted it right below the header class code. I'm not really sure why it worked but by putting the div and the <a> code below the header class code, the header area was no longer dominating the link, which made the top area clickable. Leaving the div code up near the <body> code allowed the entire background image to show up but I had to move the <a> code below the header class so the area itself in the image would work.

    Code:
    <body class="<?php echo OsBrowser::getCssClass(); ?>">
    	<div id="back">
    	<!--<a title="Crystal Saga" href="http://cs.r2games.com"></a>-->
    	</div>
    		<!-- Top -->
    		<a name="top" id="top"></a>
    		<div class="topbg"></div>
    		
    		<!-- Wrapper // -->
    		<div class="wrapper">
    			<!-- Header // -->
    			<div class="header">
    			<div id="back2">
    			<a title="Crystal Saga" href="http://cs.r2games.com"></a>
    			</div>
    Code:
    	#back {
        background: url('img/gameinfo_bg.jpg') scroll center top;
    	height: 900px;
        position: absolute;
        text-indent: -9999px;
        width: 100%;
        z-index: 0;
    	}
    	
    	#back a:link {
        /*background: url('img/gameinfo_bg.jpg') scroll center top;*/
        display: block;
        height: 160%;
        width: 100%;
    	}
    
    	#back2 {
    	}
    	
    	#back2 a:link {
        /*background: url('img/gameinfo_bg.jpg') scroll center top;*/
        display: block;
        height: 160px;
        width: 100%;
    	}


  •  

    Posting Permissions

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