Solved

using image map in a div with the background image

Posted on 2012-12-23
10
449 Views
Last Modified: 2013-01-09
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
Comment
Question by:mmalik15
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 3
  • 2
  • +1
10 Comments
 
LVL 30

Expert Comment

by:IanTh
ID: 38716916
0
 

Author Comment

by:mmalik15
ID: 38716919
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
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 38717068
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
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 38717071
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
 

Author Comment

by:mmalik15
ID: 38718398
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
 
LVL 30

Expert Comment

by:IanTh
ID: 38718462
<a href="http://www.google.co.uk" class="mainHolderLink1">" " </a>

does that work?
0
 
LVL 53

Accepted Solution

by:
COBOLdinosaur earned 500 total points
ID: 38718713
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
 
LVL 15

Expert Comment

by:StealthyDev
ID: 38719771
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
 

Author Comment

by:mmalik15
ID: 38725581
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
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 38727164
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

Featured Post

How Do You Stack Up Against Your Peers?

With today’s modern enterprise so dependent on digital infrastructures, the impact of major incidents has increased dramatically. Grab the report now to gain insight into how your organization ranks against your peers and learn best-in-class strategies to resolve incidents.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction JSON is an acronym for JavaScript Object Notation.  It is a text-string data transport mechanism, capable of representing simple or complex data structures in a consistent and easy-to-read manner.  Similar in concept to XML, but more e…
Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

733 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question