8 replies [Last post]
Dillinjl
Dillinjl's picture
Offline
Regular
Last seen: 12 years 28 weeks ago
Timezone: GMT-6
Joined: 2010-03-03
Posts: 14
Points: 20

I am trying to make an image apear when I hover over a link. this is what I have tried:

the link is div class="aspacebook"
the picture is div class="photo"

.aspacebook .photo
{
display: none;
}
.aspacebook:hover .photo
{
display: block;
}

This isn't working. is this code incorrect, or does the problem lie with my previous code?

thanks,
Josh

Deuce
Deuce's picture
Offline
Guru
Somewhere, USA
Last seen: 5 years 19 weeks ago
Somewhere, USA
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4424
Points: 1843

Well, a div isn't a link...

Well, a div isn't a link... that might be your first issue?

all » http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

Dillinjl
Dillinjl's picture
Offline
Regular
Last seen: 12 years 28 weeks ago
Timezone: GMT-6
Joined: 2010-03-03
Posts: 14
Points: 20

it's part of an image map.

it's part of an image map. So I don't really know if you would call that a link or not? I have a defined portion of an image that acts as a link to another page(#aspacebook). I want to set it up so that when you hover over that defined portion of the image (#aspacebook), a seperate image comes up (#photo).

this is what I have:

body {background-image: url(images/HomePage-1.jpg);background-repeat: repeat-x;background-position:50% 0%
}
#image_map{
width:700px;
height:571px;
background:url(images/hompepage-1.jpg) repeat-x;
position:absolute;
}
#image_map a{
display:block;
position:absolute;
}
#image_map #aspacebook{display:block;text-decoration:none;
width:78px;
height:90px;
top:230px;
left:0px;
}
 
#aspacebook{font-style:impact;font-size:2em;color:#000}
#photo{display:none}
 
 #aspacebook:hover #photo
{
    display:block
}

the image map works (#aspacebook does show up as a link to another page), and the "#photo" element appears on the screen when i set display:block. but the hover "#aspacebook:hover #photo" isn't doing anything.

any ideas?

Thanks!
josh

Smee
Smee's picture
Offline
Elder
Adelaide, Oz
Last seen: 5 years 23 weeks ago
Adelaide, Oz
Timezone: GMT+9.5
Joined: 2007-06-10
Posts: 1596
Points: 340

Pleeeez...post ALL your code.

Pleeeez...post ALL your code.

ALL the HTML and ALL the CSS.

Better still, a link to the site online - make it easy for Deuce to help you!

Mods and gurus – THANK YOU!
For your time, knowledge and experience so willingly and generously given.
Please come back tomorrow and sort us all out again Smile

Dillinjl
Dillinjl's picture
Offline
Regular
Last seen: 12 years 28 weeks ago
Timezone: GMT-6
Joined: 2010-03-03
Posts: 14
Points: 20

sorry about that. Here is

sorry about that. Here is all the HTML. all the css was in my previours message.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <link rel="stylesheet" type="text/css" href="everypage.css" />
<link rel="stylesheet" type="text/css" href="index.css" />
    <title>a spAce</title>
</head>
<body>
    <div id="container">
    <div id="image_map">
<a href="aspacebook.html" id="aspacebook">SpAce Book</a>
<a href="#store.html" id="link2" class="menu"></a>
<a href="#gallerypage.html" id="link3" class="menu"></a>
<a href="#artist.html" id="link4" class="menu"></a>
<a href="#contactus.html" id="link5" class="menu"></a>
<a href="#Exhibitions.html" id="link6" class="menu"></a>
</div>
    <div id="photo"><img src="images/photo.jpg"</div>
 
<div id="footer">110 West 7th St. - Silver City - New Mexico - 88061 - Phone:575-538-3333 - Fri: 11-5 Sat:10-5 Sun:10-4
</div>
</body>
</html>

Thanks,
Josh

Dillinjl
Dillinjl's picture
Offline
Regular
Last seen: 12 years 28 weeks ago
Timezone: GMT-6
Joined: 2010-03-03
Posts: 14
Points: 20

another plea for help.

I've ditched the image map idea and am now trying to use invisible links. Everything is working except the hover. the links show up where I want them to, the image shows up under the link when I set display:block, like I want it to. the problem is when I set
#aspacebookphoto{display:none}
and
#menu a #aspacebook:hover #aspacebookphoto{display:block}

the hover doesn't work. #aspacephoto isn't displayed on the page, which is what is supposed to happen, but when I hover over a#aspacebook it doesn't show up like i want it too.

here is full code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <link rel="stylesheet" type="text/css" href="everypage.css" />
<link rel="stylesheet" type="text/css" href="index.css" />
    <title>a spAce</title>
</head>
<body>
    <div id="container">
    <div id="imagemap"> 
 <div id="menu"> 
  <a href="aspacebook.html" id="aspacebook"><img src="images/photo.jpg" id=aspacebookphoto></a>
  <a href="store.html" id="store"><i>Store</i></a>
  <a href="gallerypage.html" id="gallerypage"><i>Gallery Page</i></a>
  <a href="artists.html" id="artists"><i>Artisits
  </i></a>
  <a href="contactus.html" id="contactus"><i>Contact Us</i></a>
  <a href="exhibitions.html" id="exhibitions"><i>Exhibitions
  </i></a>
 
 </div>
</div>
 
<div id="footer">110 West 7th St. - Silver City - New Mexico - 88061 - Phone:575-538-3333 - Fri: 11-5 Sat:10-5 Sun:10-4
</div>
</body>
</html>

#container {margin:0 auto;width: 630px; text-align: left;overflow: auto}
body {background-image: url(images/HomePage-1.jpg);background-repeat: repeat-x;background-position:50% 0%}
#imagemap{
width:700px;
height:571px;
background:url(images/hompepage-1.jpg) repeat-x;
position:absolute;
}
#menu a {
  position: absolute;
  height: 100px;
  width: 75px;
  top: 220px; 
  text-decoration: none;
  }
 
#menu a #aspacebook{display:block}
#aspacebookphoto{display:none; margin-top:110px}
#menu a #aspacebook:hover #aspacebookphoto{display:block}
 
a#aspacebook { left: 0px; }
a#store { left: 115px; width:65px }
a#gallerypage { left: 190px; width:65px }
a#artists { left: 315px; width:80px }
a#contactus { left: 450px}
a#exhibitions { left: 565px; width:50px }

I am desperate for ideas, can anyone help me out?

thanks,
Josh

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 1 week 5 days ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5344
Points: 2965

A couple of things to

A couple of things to note:

 
<a href="aspacebook.html" id="aspacebook"><img src="images/photo.jpg" id=aspacebookphoto></a>

You haven't quoted the id of the image, also you are using axhtml doctype so should close the image tag:
<a href="aspacebook.html" id="aspacebook"><img src="images/photo.jpg" id="aspacebookphoto" /></a>

In your css you are targeting incorrectly.

Quote:

#menu a #aspacebook{display:block}
#aspacebookphoto{display:none; margin-top:110px}
#menu a #aspacebook:hover #aspacebookphoto{display:block}

#menu a#aspacebook{display:block}
#aspacebookphoto{display:none; margin-top:110px}
#menu a#aspacebook:hover #aspacebookphoto{display:block}

It could also be cleaned up to:
 
#aspacebook{display:block}
#aspacebookphoto{display:none; margin-top:110px}
#aspacebook:hover #aspacebookphoto{display:block}

For it to work in IE6 you need to change some property of the link itself on hover.

#aspacebook:hover{color:red;}

Dillinjl
Dillinjl's picture
Offline
Regular
Last seen: 12 years 28 weeks ago
Timezone: GMT-6
Joined: 2010-03-03
Posts: 14
Points: 20

got it!

Thanks for the tips Tony, quoting id=aspacebookphoto probably would have solved my problem, but I just ditched it all together and fixed my problem.

here is the final product which works just how I want it.

#container {margin:0 auto;width: 630px; text-align: left;overflow: auto}
body {background-image: url(images/HomePage-1.jpg);background-repeat: repeat-x;background-position:50% 0%}
#imagemap{
width:700px;
height:571px;
background:url(images/hompepage-1.jpg) repeat-x;
position:absolute;
}
#menu a {
  position: absolute;
  height: 100px;
  width: 75px;
  top: 220px; 
  text-decoration: none;
  }
 
a#aspacebook img{display:none; margin-top:110px;border:none}
a#store img{display:none; margin-top:110px;border:none}
a#gallerypage img{display:none; margin-top:110px;border:none}
a#artists img{display:none; margin-top:110px;border:none}
a#contactus img{display:none; margin-top:110px;border:none}
a#exhibitions img{display:none; margin-top:110px;border:none}
 
a#aspacebook:hover img{display:block; color:red}
 
 
a#store img{display:none; margin-top:110px}
a#store:hover img{display:block;color:red}
 
 
 
a#gallerypage img{display:none; margin-top:110px}
a#gallerypage:hover img{display:block;color:red}
 
 
a#artists img{display:none; margin-top:110px}
a#artists:hover img{display:block;color:red}
 
 
a#contactus img{display:none; margin-top:110px}
a#contactus:hover img{display:block;color:red}
 
 
a#exhibitions img{display:none; margin-top:110px}
a#exhibitions:hover img{display:block;color:red}
 
 
 
a#aspacebook { left: 0px; }
a#store { left: 115px; width:65px }
a#gallerypage { left: 190px; width:65px }
a#artists { left: 315px; width:80px }
a#contactus { left: 450px}
a#exhibitions { left: 565px; width:50px }
 
 
 
 
 
 
 
 
#footer{float:left;font-family:FUTURAblack BT;color:#FFF;font-size:.75em;text-align:center;position:absolute;top:545px;letter-spacing:.12em;font-weight:bold}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <link rel="stylesheet" type="text/css" href="everypage.css" />
<link rel="stylesheet" type="text/css" href="index.css" />
    <title>a spAce</title>
</head>
<body>
    <div id="container">
    <div id="imagemap"> 
 <div id="menu"> 
  <a href="aspacebook.html" id="aspacebook"><img src="images/photo.jpg"></a>
  <a href="store.html" id="store"><img src="images/photo.jpg"></a>
  <a href="gallerypage.html" id="gallerypage"><img src="images/photo.jpg"></a>
  <a href="artists.html" id="artists"><img src="images/photo.jpg"></a>
  <a href="contactus.html" id="contactus"><img src="images/photo.jpg"></a>
  <a href="exhibitions.html" id="exhibitions"><img src="images/photo.jpg"></a>
 
 </div>
</div>
 
<div id="footer">110 West 7th St. - Silver City - New Mexico - 88061 - Phone:575-538-3333 - Fri: 11-5 Sat:10-5 Sun:10-4
</div>
</body>
</html>

Dillinjl
Dillinjl's picture
Offline
Regular
Last seen: 12 years 28 weeks ago
Timezone: GMT-6
Joined: 2010-03-03
Posts: 14
Points: 20

ok, cleaned up the css to get

ok, cleaned up the css to get rid of my redundancy.

#container {margin:0 auto;width: 630px; text-align: left;overflow: auto}
body {background-image: url(images/HomePage-1.jpg);background-repeat: repeat-x;background-position:50% 0%}
#imagemap{
width:700px;
height:571px;
background:url(images/hompepage-1.jpg) repeat-x;
position:absolute;
}
#menu a {
  position: absolute;
  height: 100px;
  width: 75px;
  top: 220px; 
  text-decoration: none;
  }
 
a#aspacebook img{display:none; margin-top:110px;border:none}
a#store img{display:none; margin-top:110px;border:none}
a#gallerypage img{display:none; margin-top:110px;border:none}
a#artists img{display:none; margin-top:110px;border:none}
a#contactus img{display:none; margin-top:110px;border:none}
a#exhibitions img{display:none; margin-top:110px;border:none}
 
a#aspacebook:hover img{display:block; color:red}
a#store:hover img{display:block;color:red}
a#gallerypage:hover img{display:block;color:red}
a#artists:hover img{display:block;color:red}
a#contactus:hover img{display:block;color:red}
a#exhibitions:hover img{display:block;color:red}
 
 
 
a#aspacebook { left: 0px; }
a#store { left: 115px; width:65px }
a#gallerypage { left: 190px; width:65px }
a#artists { left: 315px; width:80px }
a#contactus { left: 450px}
a#exhibitions { left: 565px; width:50px }
 
 
 
 
 
 
 
 
#footer{float:left;font-family:FUTURAblack BT;color:#FFF;font-size:.75em;text-align:center;position:absolute;top:545px;letter-spacing:.12em;font-weight:bold}