Improve company productivity with a Business Account.Sign Up

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 496
  • Last Modified:

using image map in a div with the background image

I know this question has been asked in the past but strangely could not find solution to the issue. My div is using a background image and I want to use image map on that image. Whats are the best options using either css, html, jquery, asp.net c# .
0
mmalik15
Asked:
mmalik15
  • 4
  • 3
  • 2
  • +1
1 Solution
 
IanThCommented:
0
 
mmalik15Author Commented:
thanks for the comment. I know how to use imagemap but what i m asking is how to use imagemap when the image is set as a background image in a div

<div id="bgContainerFade" style="background-image:url(/media/55921/0048mp_murraypark_hp_image_bg.jpg);"></div>
0
 
COBOLdinosaurCommented:
The two ways of using the image are mutually exclusive.  A background can never be clickable, let alone have links applied as a map.

You either have to make the image content or change your design.  If you need something overlaid in the image then use absolute positioning and z-index; but that will interfere with the clickability of the image.

Cd&
0
Get 10% Off Your First Squarespace Website

Ready to showcase your work, publish content or promote your business online? With Squarespace’s award-winning templates and 24/7 customer service, getting started is simple. Head to Squarespace.com and use offer code ‘EXPERTS’ to get 10% off your first purchase.

 
COBOLdinosaurCommented:
If you don't have any overlays for the image, you could use a transparent image as the map, overlaid in the image and that might simulate what you are trying to do.

Cd&
0
 
mmalik15Author Commented:
thanks for the comments.

i have tried adding a hyperlink with the absolute position. But this hyper link for some reason is  not working.

see the code

<a href="http://www.google.co.uk" class="mainHolderLink1">&nbsp;</a> inside the div with id="bgContainer"
0
 
IanThCommented:
<a href="http://www.google.co.uk" class="mainHolderLink1">" " </a>

does that work?
0
 
COBOLdinosaurCommented:
To position absolutely you must specify dimensions and the container must have position relative specified.  A link that does not contain anything will not be clickable, and a single space will mean the user has to be exactly on the position the space for the click to work.

You are basically wasting your time with hacked approaches that will not work.  All you will get is frustrated.

Cd&
0
 
StealthyDevCommented:
Hi,

Give the below code a try...

Also, you can store the left, top, width, height properties in an array of your programming languages - javascript/.net, whatever..

<style>
.outerDIV {
	background-image:
		url('http://www.experts-exchange.com/images/experts-exchange/experts-exchange-logo.png');
	background-repeat: no-repeat;
	width: 270px;
	height: 50px;
}

#e {
	position: absolute;
	top: 23px;
	height: 15px;
	width: 13px;
	left: 9px;
}

#x {
	position: absolute;
	top: 23px;
	height: 15px;
	width: 13px;
	left: 25px;
}

#p {
	position: absolute;
	top: 23px;
	height: 15px;
	width: 13px;
	left: 38px;
}
</style>

<script>
	function showAlert(div) {
		alert(div.id);
	}
</script>

<div id="bgContainerFade" class="outerDIV">
	<div id="e" onclick="javascript: showAlert(this);"></div>
	<div id="x" onclick="javascript: showAlert(this);"></div>
	<div id="p" onclick="javascript: showAlert(this);"></div
	<div id="e2"></div>
	<div id="r"></div>
	<div id="t"></div>
	<div id="s"></div>
	<div id="e3"></div>
	<div id="x2"></div>
	<div id="c"></div>
	<div id="h"></div>
	<div id="a"></div>
	<div id="n"></div>
	<div id="g"></div>
	<div id="e4"></div>
</div>

Open in new window

0
 
mmalik15Author Commented:
thanks for all the comments.

I have added 'img' inside the div as suggested and removed the background image coming via css. You may look at it again on www.murraypark.com

The problem now I have is z-index. If I set the z-index of bgcontainer div to 10 or so. The image map works but i can't click any other hyperlinks on the page.
0
 
COBOLdinosaurCommented:
Only one thing can be on top, and you can only click on the top layer.  Maybe you are starting to understand why most developers would not consider going back to image maps which most of us quit using 10 years ago.

Cd&
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Easily Design & Build Your Next Website

Squarespace’s all-in-one platform gives you everything you need to express yourself creatively online, whether it is with a domain, website, or online store. Get started with your free trial today, and when ready, take 10% off your first purchase with offer code 'EXPERTS'.

  • 4
  • 3
  • 2
  • +1
Tackle projects and never again get stuck behind a technical roadblock.
Join Now