UtterAccess.com
X   Site Message
(Message will auto close in 2 seconds)

Welcome to UtterAccess! Please ( Login   or   Register )

Custom Search
 
   Reply to this topicStart new topic
> Hover Event For An Image Floating Over Another Image    
 
   
gunderj
post Jun 16 2014, 01:26 PM
Post#1



Posts: 194
Joined: 5-September 05



Using CSS the below is a simple example of trying to get image swap with the hover event which does not work - only a portion of the new image shows and the old image is still showing. The size of the two images are exactly the same so I think there is a problem due to positioning the swap image over another background image (large.jpg). After several hours of trying everything under the sun I come to this forum, hat in hand.
Thanks much if you can provide some feedback.
Jay
lt;!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style type="text/CSS">
#header {
height: 500px;
width: 900px;
margin-right: auto;
margin-left: auto;
position: relative;
left: 0;
top: 0;
}
#button1 {
position: absolute;
top: 30px;
left: 70px;
}
#button1 a:hover {
background-image: URL('images/buttonRed1.gif');
}
</style>
</head>
<body>
<div id="header">
<img src="images/large.jpg"/>
<div id="button1"><a href="abc.html"><img src="images/buttonRed2.gif"/></a></div>
</div>
</div>
</body>
</html>
Go to the top of the page
 
cheekybuddha
post Jun 16 2014, 05:42 PM
Post#2


UtterAccess VIP
Posts: 9,275
Joined: 6-December 03
From: Telegraph Hill


Hi gunderj,
You are styling the link within the div (a:hover) rather than the div itself.
Adjust your CSS:
CODE
#button1:hover {
background-image: URL('images/buttonRed1.gif');
}

hth,
d
Go to the top of the page
 
cheekybuddha
post Jun 16 2014, 05:46 PM
Post#3


UtterAccess VIP
Posts: 9,275
Joined: 6-December 03
From: Telegraph Hill


If that's not what you're after then you may have to style the original link with images/buttonRed2.gif as the background.
th,
d
Go to the top of the page
 
gunderj
post Jun 17 2014, 09:45 AM
Post#4



Posts: 194
Joined: 5-September 05



Thanks for the feedback David,
Unfortunately both did not work. I tried I believe to be every combination possible. Image on top of another image, I do not think rollover is possible. Oye!
Thanks,
Jay
Go to the top of the page
 
cheekybuddha
post Jun 17 2014, 10:09 AM
Post#5


UtterAccess VIP
Posts: 9,275
Joined: 6-December 03
From: Telegraph Hill


Just noticed you have an extra closing </div> tag.
It might be throwing everything!
d
Go to the top of the page
 
cheekybuddha
post Jun 17 2014, 10:28 AM
Post#6


UtterAccess VIP
Posts: 9,275
Joined: 6-December 03
From: Telegraph Hill


This works for me:
CODE
<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Untitled Document</title>
    <style type="text/CSS">
      #header {
        height: 500px;
        width: 900px;
        margin-right: auto;
        margin-left: auto;
        position: relative;
        left: 0;
        top: 0;
      }
      #button1 {
        position: absolute;
        top: 30px;
        left: 70px;
        width: 100px;
        height: 100px;
        background-image: URL('images/buttonRed2.gif');        
      }
      #button1:hover {
        background-image: URL('images/buttonRed1.gif');
      }
    </style>
  </head>
nbsp; <body>
    <div id="header">
      <a href="abc.html">
        <div id="button1"></div>
      </a>
    </div>
  </body>
</html>

hth,
d
Go to the top of the page
 


Custom Search
RSSSearch   Top   Lo-Fi    11th December 2017 - 11:25 PM