Making an image non-clickable

joeyjojo · 2 Dec 2006 at 23:51

I'm using an image in a div underneath a content div. The problem is, the image seems to take priority. Links are dodgy as it thinks you're clicking the image. The little IE image box pops up.

How do I make it less interesting to the browser, but still in <img> form, ie. not make it a background?

Maybe some onBlur trickery?

MTA99 · 3 Dec 2006 at 12:41

Not quite sure i understand exactly what your problem, are you saying that you can't click text links because "the browser" thinks you're clicking the image below?

If so have you double checked your code to ensure you haven't get any open tags?

Post the code or the URL so we can have a look.

joeyjojo · 3 Dec 2006 at 14:04

Code:

<body>
<div id="container">
<div id="inner">
<div id="nav">

<ul>
<li><a href="index.html">Home</a></li>
<li><a href="we_are.html">We Are</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="equipment.html">Equipment</a></li>
<li><a href="locations.html">Locations</a></li>
<li><a href="links.html">Links</a></li>
</ul>
</div>
<div id="border"><img src="images/we_are.png" id="background" alt=""/></div>
<div id="content">
<p>Body Text</p>
</div>
</div>
</div>
</body>

Code:

* {
padding:0;
margin:0;
}
body{
background:#000000 url(bodyback.gif) top left repeat-x;
color:#FFFFFF;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
}
#container {
position:relative;
top:25px;
width:600px;
padding:6px;
margin:0 auto;
background-color:#0C0C0C;
/*border:1px red solid;*/
}
#inner {
width:578px;
padding:10px;
background-color:#000000;
border:1px #666666 solid;
min-height:430px;
}
#nav {
width:580px;
text-align:center;
font-size:17px;
height:47px;
/*border:1px yellow solid;*/
border-bottom:1px #666666 solid;
}
#border {
position:absolute;
right:30px;
top:85px;
}
#content {
text-align:justify;
width:460px;
color:#ffffff;
padding-top:120px;
background-color:#000000;
}
#content p {
padding-bottom:13px;
text-indent:8px;
background-color:#000000;
}

...with irrelevant code removed.

It looks like this:

Sooo, the problem is that it seems to give the image contained in #border priority. So, any links which are on top of the image don't work. It's impossible to select text which is on top. Things like that. It might be possible to make it a background image, but I'd have thought there was a better way. Z-index has no effect.

Cheers

Dj_Jestar · 3 Dec 2006 at 14:05

z-index

joeyjojo · 3 Dec 2006 at 14:06

Dj_Jestar said:
z-index

A minute too late

I'll experiment with it more now mate.