Top area of background image clickable?

Question

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?

UPDATE:

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 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 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 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 code allowed the entire background image to show up but I had to move the 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%;
}

perhaps you're taking a bit too complicated of an approach. instead of putting the background image in the css in the #back a:link tag, try putting it in an tag inside the tag — Chris Drappier, Mar 14 '12 at 03:50
@ChrisDrappier if the image is not a part of content then there is not need to define the image in IMG tag — sandeep, Mar 14 '12 at 03:57

w3uiguru · Answer 1 · 2012-03-14T05:42:15.920

2

IF i am getting your problem correct this what you want ... You can see the fiddle to get the concept.

Fiddle: http://jsfiddle.net/tHuqV/

Demo: http://jsfiddle.net/tHuqV/embedded/result/

Note: In fiddle i have given width:100% ; on a tag, but we can make it fixed size as per need and set the position center by giving the css - margin: 0 auto;

edited Mar 14 '12 at 05:42

answered Mar 14 '12 at 05:34

w3uiguru

5,864
2
21
25

nice but i still have no idea how to make the top area of my image clickable. on my site, you can go down maybe 4 or 5 inches from the top of the image and the image will be clickable. but why is the image clickable starting at 4-5 inches from the top? that's what i am wondering. i can't get the actual top part of the image itself to be clickable. the clickable region starts at 4-5 inches and then ends at around 8-9 inches and isn't clickable for the rest of the way down the page. – user1114968 Mar 14 '12 at 08:45
Inches? You don't develop for the web much, do you? :) – MetalFrog Mar 14 '12 at 11:55
@MetalFrog - lol I didn't see this reply until now. This problem has been solved. I'm a webdeveloper but I always make mistakes when I create websites that the resolutions to mistakes I make are always right in front me...I'm just too blind or I overlook the details. – user1114968 Jun 19 '12 at 07:23

score 0 · Answer 2 · answered Mar 14 '12 at 05:27

0

Write a onclick method for a tag:

<div id="back">
    <a title="Crystal Saga" href="http://cs.r2games.com" onclick="doThis()"></a>
</div>

This is what there in mmorpg.com site.

answered Mar 14 '12 at 05:27

Srikanth Kshatriy

444
1
4
10

looking at their source code and editing it using the firebug add-on, deleting the onclick function has no affect on the code from what I see. just because the onclick function is in the code doesn't mean it is the reason why the top region of the image is clickable. i think that all it does is perform the action that onclick is supposed to do once a user clicks the link. doesn't necessarily specify what area of the image is clickable. – user1114968 Mar 14 '12 at 08:42

Top area of background image clickable?

2 Answers2