Jump to content

building a digital map with css


malibujamba
 Share

Recommended Posts

Hello,I am buliding a digital map with the help of css. The basic idea is that when you move your mouse to one of the marks on the map a window with information about that mark appears.Now first it only worked in firefox but after some thinking I also got it working in IE7. But when I last week tried it in IE6 it didn't worked. Maybe someone of you people see's the problem? I can't find it yet realy.Here's the html:

<div id="map">	<ul>		<li class="object1"><a href="#"><img src="mark.gig" /></a>			<ul>				<li>information about object1</li>			</ul>				</li>				<li class="object2"><a href="#"><img src="mark.gif" /></a>			<ul>				<li>information about object2</li>			</ul>				</li>	</ul></div>

and here the css:

/*Map*/#map {	position: absolute;	width: 750px;	height: 500px;	background-image: url("map.jpg");}.object1 {	position: absolute;	margin-left: 60px;	margin-top: 260px;	width: 20px;	height: 20px;}#map ul li.object1 ul{	margin-left: -10000px;}.object1 ul li {	background-image: url("objectbackground.jpg");	width: 200px;	height: 300px;}#map ul li.object1:hover ul {	margin-left: 20px;	margin-top: -302px;}.object2 {	position: absolute;	margin-left: 400px;	margin-top: 123px;	width: 20px;	height: 20px;}#map ul li.object2 ul{	margin-left: -10000px;}.object2 ul li {	background-image: url("objectbackground.jpg");	width: 200px;	height: 300px;}#map ul li.object2:hover ul {	margin-left: -200px;	margin-top: -22px;}

Link to comment
Share on other sites

Correct, you will just have to be clever on how you can put your background images and such within the anchor tag.For example:

ul#map a#yourID {background:url(image.jpg);}ul#map a#yourID:hover {background:url(image.jpg);}

hope that helps!

Link to comment
Share on other sites

  • 3 weeks later...

hello again,I was verry bussy last days/weeks. but latetly I started working on my digital map again. After you people told me what te problem was. I went looking on the internet. Finaly I found this peace of java script: http://www.naarvoren.nl/artikel/hover/csshover.htc wich takes care of the people who are using internet explorer 6 (and probably lower, but I can't test that). You have to include the document into your css like this:

body {	behavior: url("csshover.htc");}

Before getting bussy I have read this article http://www.naarvoren.nl/artikel/hover/ (it's in dutch to bad:) ).anyways. thanx for putting me on the right track.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...