Image swap and hover state

Forum Moderators: not2easy

Message Too Old, No Replies

Image swap and hover state

rhes

10:31 am on Apr 24, 2009 (gmt 0)

I have set up a page which has an image swap , a bit like the BBC home page. So when you hover over a list it changes the corresponding image. i.e when I hover on an entry in the list the image changes and the entry background changes colour. However, when I move the cursor off the list the image stays but the entry changes back to the original colour.

I would like the entry which relates to the image to be highlighted. Does that make sense to anybody.

I really am not sure if this is the right forum, if not please advise.

CSS_Kidd

12:56 pm on Apr 24, 2009 (gmt 0)

CSS is the right place to be. You can achieve this by creating an a:hover state for the link. And for when you want it to stay that way when you are on that page, create a "selected(name doesn't matter)" class with the same rules as the hover state.

swa66

2:13 pm on Apr 24, 2009 (gmt 0)

Welcome to WebmasterWorld! [webmasterworld.com]

To have a "selected" item in a menu act differently, you can also add a class (or id) on the body and and a class on each menu item.

The advantage is that you don't need to change the menu itself throughout the site (esp. if you use SSI to include it it become much more comfy to update it all.)

e.g. how to use, lets assume just 2 items in the menu: about and contact us (real menus will be larger of course)

about.html:


<!DOCTYPE ...
<html>
 <head> 
  <title>about us</title>
  <link rel="stylesheet" type="text/css" href="style.css" />
 </head>
 <body class="
b-about">
  <ul class="menu">
   <li class="
m-about"><a href="about.html">about us</a></li>
   <li class="m-contact"><a href="contact.html">contact us</a></li>
  </ul>
  ...
 </body>
</html>

contact.html:


<!DOCTYPE ...
<html>
 <head> 
  <title>contact us</title>
  <link rel="stylesheet" type="text/css" href="style.css" />
 </head>
 <body class="
b-contact">
  <ul class="menu">
   <li class="m-about"><a href="about.html">about us</a></li>
   <li class="
m-contact"><a href="contact.html">contact us</a></li>
  </ul>
  ...
 </body>
</html>

style.css:


.menu {
 /* regular menu styling */
}
.b-about .m-about, .bcontact .mcontact {
 /* highlight styling */
}

Hope this helps

rhes

8:06 am on May 1, 2009 (gmt 0)

This is what I currently have, my CSS knowledge is not good and so unsure how to progress it based on your advice.

Can you help further?

test.html
===========================================================
...
...
<script type="text/javascript">
function swapImages(newImg) {

var target = document.getElementById('swapTarget');
target.src = newImg;
}
</script>
...
...
...

<div id="newshover">
<ul class="ulnewshover">
<li class="list1">
<ul class="ulnewspost">
<li>
<img src="Pictures_News_skier.jpg_200x200.jpg" id="swapTarget" alt="" />
</li>
<li class="list2">
<a class="nlink" href="English/News.php#S3" onmouseover="swapImages('Pictures_News_ladies_night_2008.jpg_200x200.jpg');">G and E aim for London 2012</a>
<a class="nlink" href="English/News.php#S1" onmouseover="swapImages('Pictures_News_skier.jpg_200x200.jpg');" >The Return of the Magnificent 7.</a>
<a class="nlink" href="English/News.php#S2" onmouseover="swapImages('Pictures_News_AB_presentation.jpg_200x200.jpg');" >Well Done Ade on a successful year.</a>
</ul>
</li>
</ul>
</div>
===========================================================

news.css
===========================================================
#newshover {
width: 600px;
}
.ulnewspost {
list-style: none;
margin: 0px 0px 0px 0px;
padding: 0px;
}
a.nlink:link,a.nlink:visited,a.nlink:active {
background-color: #526552;
text-decoration: none;
padding: 15px 0px 0px 20px;
height: 34px;
display: block;
border-bottom: 1px solid #667F66;
}
a.nlink:hover {
background-color: #708C70;
}
.ulnewshover {
float: left;
list-style: none;
overflow: hidden;
}
.ulnewshover li.list1 {
float: left;
width: 500px;
}
.ulnewshover li.list2 {
float: left;
width: 300px;
border-top: 1px solid #667F66;
}
.ulnewshover li {
float: right;
width: 200px;
}
===========================================================

swa66

9:03 am on May 1, 2009 (gmt 0)

It might well be possible that I completely missed what you want to achieve.

But I'm afraid I don't really grasp what you want to happen.

Your javascript (as far I I can read that) changes the image upon hover, but doesn't swap it back to the original once you're done with hovering. I get that is intentional ?

And you CSS changes background while hovering but switches it back to the original color after it's done with hovering. I get that is not what you seek ?

If that is true, then the news is that CSS alone cannot help you, CSS hover is only while hovering, it wont change it "permanently". I'd try my luck expanding the javascript.

If it's the reverse that you seek: only hover the images while hovering the menu and/or have a default image that's dependent on the page you're on (something along the lines of the code I gave you), then CSS is your friend and can even replace the javaascript completely.

Basically the only "event" that CSS knows is hover as a state.
If you need somehting to happen, it's out of the hands of CSS alone and javascript is an obvious candidate.
T

rhes

9:14 am on May 1, 2009 (gmt 0)

Thanks for your response. I think you now understand what I am trying to achive. i.e after hovering, I don't want to change the image back. likewise, I don't want to change back to the original background after hovering.

If you look at the BBC home page you can see the effect I am after.

So I guess I will have to do it via javascript as you said.

Thanks for your advice.