Solved

image map for background image in a div tag

Posted on 2007-11-23
7
6,556 Views
Last Modified: 2013-11-19
Hi

Can someone please tell me how I can create some maps for an image thats the background of a div tag.
<div id="maindiv" style="border: 1px solid blue; background-image: url(background800600full.gif); width: 800px; background-repeat: repeat-x;" align="center">
I'd like to create maps for 3 segments of the image.  Im a novice to maps, divs etc and the tutorials online dont have exactly what I'm looking for
Also I have just noticed that on my local browser the image appears but when I upload to my webserver it doesnt appear unless I do a direct insert ie <IMG>

Much appreciated
Louise
0
Comment
Question by:louise_8
[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
  • 3
  • 2
7 Comments
 
LVL 18

Accepted Solution

by:
Eternal_Student earned 200 total points
ID: 20338400
Firstly, you cannot put an image map on a background image but you CAN lay a transparent gif on top of that:

http://www.recentrambles.com/pragmatic/view/35

Not sure what you are trying to achieve, but it sounds like that could be a solution ^.

The second issue is probably to do with the path to your image. If you are using an external style sheet then the link will probably have a different path than when you enter it into the html page. Depends on how your site is structured of course.
0
 

Author Comment

by:louise_8
ID: 20338591
Thanks Eternal Student, love the name :)
Im not using an external style sheet for my div just this code; background-image: url(background800600full.gif);  with background800600full.gif being stored in the same folder, does that indicate what Im doing wrong?

I will implement the other code for the map as soon as I get the above working and let you know

Cheers
0
 
LVL 18

Expert Comment

by:Eternal_Student
ID: 20338802
Put the background style in the css at the top:

<style type="text/css">
#divname{background-image: url(background800600full.gif);}
</style>

Providing the image is uploaded and in the same directory as this page then it should load. You will also need to give the div the correct id. If this doesnt work then send me a link and I will be able to work out why.


0
Technology Partners: 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!

 

Author Comment

by:louise_8
ID: 20347551
Thanks, heres the link http://www.resource-central.org/louise/louiseg.html if i just include the background image in the css code it wont work locally.  Ive left both in, you'll probably figure it out straight away :)
0
 
LVL 3

Expert Comment

by:anandhariharan
ID: 20497784
Try this! This sure should solve your problem
<div id="maindiv" style="border: 1px solid blue; background-image: url(background800600full.gif); width: 800px; background-repeat: repeat-x;" align="center">
<a href="something.htm" style="display:block; width:800px; height:100px;">&nbsp;</a>
</div>

Open in new window

0
 

Author Comment

by:louise_8
ID: 20678736
apologies for the delay getting back on this.  I thought I had accepted this, perhaps the page crashed.. and only noticed when I logged back in today after 6 weeks- I have been away.  
Thanks Eternal student for your help and anyone else that contributed
0

Featured Post

Optimize your web performance

What's in the eBook?
- Full list of reasons for poor performance
- Ultimate measures to speed things up
- Primary web monitoring types
- KPIs you should be monitoring in order to increase your ROI

Question has a verified solution.

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

Preface This is the third article about the EE Collaborative Login Project. A Better Website Login System (http://www.experts-exchange.com/A_2902.html) introduces the Login System and shows how to implement a login page. The EE Collaborative Logi…
This article discusses four methods for overlaying images in a container on a web page
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …
Suggested Courses

628 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