CSS - Image Swap & Drop Down Menu With Same Mouseover

Morning guys and girls,

I am getting a headache trying to straighten this bug out and could really do with a fresh pair of eyes.

The page is he www.BeeBee-Design.co.uk/dev.

It works fine in IE6 ( ) but not FF ( ).

The relevant piece of HTML is:

Code:

  <div class="navigation">
    <ul>
      <li class="navigation">
        <a class="nav" href="index.html#">HOME</a></li>
      <li class="navigation">
        <a class="nav" href="index.html#">SERVICES</a></li>
      <li class="navigation">
        <a class="nav" href="index.html#">HOTELS</a></li>
      <li class="navigation">
        <a class="nav" href="index.html#">QUOTE</a></li>
      <li class="navigation">
        <a class="nav" href="index.html#">BOOK</a></li>
      <li class="navigation">
        <a class="nav" href="index.html#">CONTACT</a></li>
    </ul>
  </div>

And the CSS:

Code:

div.navigation {
	font-family: Arial;
	font-weight: normal;
	word-spacing: 10px;
	padding: 0 40px 0 0;
	margin-top: 120px;
	line-height: 30px;
	background-color: #9A9FBA;
	text-align: center;
}

* html div.navigation {
	word-spacing: -6px;
}

a.nav:link {color: #FFFFFF; text-decoration: none; background-image: url(images/navback.jpg); width: 117px; height: 30px;}
a.nav:visited {color: #FFFFFF; text-decoration: none; background-image: url(images/navback.jpg); width: 117px; height: 30px;}
a.nav:hover {color: #FFFFFF; text-decoration: none; background-image: url(images/rollover.jpg); width: 117px; height: 30px;}

li.navigation {
	display: inline;
	font-size: 18px;
	font-weight: normal;
	color: #FFFFFF;
}

The problem seems to be something to do with the way that IE will stretch the block to the width and height settings in the CSS and FF will not. Any suggestions greatly appreciated and will be rewarded with a packet of the finest Chocolate Digestives known to mankind.

I thank you.........

Here is the webpage

1) Each of the globes as well as the text below is a link to other sites.

Using css to change the image to the same globe - but not faded - do I have to have both images be a background image??

Currently the image is in the html.

2) Since each globe is different, then do I need to create a class for each one??

Thanks!

I have a side menu I'm trying to work with.

using this css code for my menu
http://www.dynamicdrive.com/dynamicindex1/popit.htm

It's doing what I want it to however, I have 2 questions.

1. When the mouse is over the link and the menu pops up to the right, how can I make the text larger? I can't seem to figure this out as I'm new to css.

2. I would like the popup menu to show more to the right, off the main set of links. How would I go about this.

The page above in the example has all the code I used. Look at the demo and you see. I have the main links resized fine but can't get the linkset text larger

thanks in advance.. any help would be much appreciated

Hi,
I have a two column CSS layout - the stylesheet and web page that uses it are attached. I tried to put a menu in the left column (technically div) - of this web page. This is a menu that uses JS mouseover and mouseout to set the style of the children menus to block or none - to show or hide the children or submenu items.

onmouseover="document.all.child1.style.display='block'
onmouseout="document.all.child1.style.display='none'

When you mouseover the menu item, children menu items underneath it are supposed to be displayed, but they're not.

Please look at the style sheet - and web page.

Any idea why this menu works outside of the CSS two column layout, but not when I place the code inside this layout??????

Thanks
Vmusic

Following sample is from http://www.code-couch.com/jeff/snippets/general/tektips-navigation-example.html
is what I am trying to reference to create a template. But how do I how keep the state of Menu on each requested page any help is appreciated. The following menu is saved in a separate jsp file i.e. navs.jsp. I include this navigation jsp file in all of my files. Initially the drop down looks like:


Code:

. Ask.Jeeves 
. [+] Google.com 
. [+] Yahoo.com

Now clicking [+] in front of Google.com will look like.

Code:

. Ask.Jeeves 
. [-] Google.com 
     . Google.co.ie
     . Google.co.ie
     . [+] Google.co.nz 
. [+] Yahoo.com

Lets's say now if I click on Google.co.ie it takes me to sample.jsp and on this requested page (sample.jsp) how can I show the following menu hierarchy with Google.co.ie bold/underlined/colorchanged showing what menu content I clicked and am viewing the appropriate content i.e.


Code:

. Ask.Jeeves 
. [-] Google.com 
     . Google.co.ie
     . Google.co.ie
     . [+] Google.co.nz 
. [+] Yahoo.com

Same way clicking Google.com or Yahoo.com or Ask.Jeeves shows you the following hierarchy on the requested page with higlight/bold/colored the link we just selected. i.e.


Code:

. Ask.Jeeves 
. [+] Google.com 
. [+] Yahoo.com

Any time clicking on the menu takes me to some page but on that page I want to show th hierarchy of the menu all the way to which is recently clicked with different color setting.

Here is the source for the above:

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" lang="en" xml:lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1"/>
<meta http-equiv="content-language" content="en"/>
<title>Test Harness</title>

<style type="text/css">

ul li ul {display:none;list-style-type: none;}

#myNav li a:hover {
color: blue;
}

#myNav li a:active {
color: #FF0000;
background: #FFFFFF;
}

#myNav { list-style-image: url(page.GIF); }
</style>

<script type="text/javascript">
<!--
function initNav() {
	var navObj = document.getElementById('myNav');
	var ulCollection = navObj.getElementsByTagName('li');
	for (var loop = 0; loop < ulCollection.length; loop++) {
		if(ulCollection[loop].getElementsByTagName('ul').length > 0) {
			/* we have an LI that contains a UL */
			if (ulCollection[loop].getElementsByTagName('span').length > 0) {
				/* there is at least one SPAN tag present */
				ulCollection[loop].getElementsByTagName('span')[0].innerHTML = "[<a href=\"javascript://\" onclick=\"this.innerHTML=this.innerHTML=='+'?'-':'+';temp=this.parentNode.parentNode.getElementsByTagName('ul')[0].style;temp.display=temp.display=='block'?'none':'block';\">+</a>] ";
			}
		}
	}
}
window.onload = initNav;
//-->
</script>

</head>
<body>
<ul id="myNav">
	<li><a href="http://www.askjeeves.com">Ask.Jeeves</a></li>
	<li><span></span><a href="http://www.google.com">Google.com</a>
		<ul>
			<li><a href="http://www.google.co.uk">Google.co.uk</a></li>
			<li><a href="http://www.google.co.ie">Google.co.ie</a></li>
			<li><span></span><a href="http://www.google.co.nz">Google.co.nz</a>
			<ul>
			   <li>*3*</li>
			   <li>*4*</li>
			</ul>
</li>
		</ul>
	</li>

	<li><span></span><a href="http://www.yahoo.com">Yahoo.com</a>
		<ul>
			<li><a href="http://www.yahoo.co.uk">Yahoo.co.uk</a></li>
			<li><a href="http://www.yahoo.co.nz">Yahoo.co.nz</a></li>
		</ul>
	</li>
</ul>
</body>
</html>

Any help is really appreciated thanks.

EDIT:: Simplier way to write the question ^.^ :: When I scroll off the menu/link onto the first link in the submenu it stays, but when I mvoe down to the next item in the submenu it disappears.
(My drop down is vertically aligned on the left.)
(bits of the code that relate to the menu)

PHP Code:
.btn1 { position: absolute; left: 165px; top: 200px; } 
.btn2 { position: absolute; left: 165px; top: 240px; }
.btn3 { position: absolute; left: 165px; top: 280px; } 
.btn4 { position: absolute; left: 165px; top: 320px; }
.btn5 { position: absolute; left: 165px; top: 360px; } 
.btn6 { position: absolute; left: 165px; top: 400px; }
.btn7 { position: absolute; left: 165px; top: 440px; } 
.btn8 { position: absolute; left: 165px; top: 480px; }
.link1 { position: absolute; left: auto; top: 240px; }
.link2 { position: absolute; left: auto; top: 280px; }
.link3 { position: absolute; left: auto; top: 320px; }
.link4 { position: absolute; left: auto; top: 360px; }
.link5 { position: absolute; left: auto; top: 400px; }
.link6 { position: absolute; left: auto; top: 440px; }
.link7 { position: absolute; left: auto; top: 480px; }
.link8 { position: absolute; left: auto; top: 520px; }
.link9 { position: absolute; left: auto; top: 560px; }

#nav, #nav ul { padding: 0; margin: 0; list-style: none; }
#nav a { display: block; width: 100px; }
#nav li { width: 100px; }
#nav li ul { position: absolute; width: 100px; left: -9999px; display: none; top: 0; z-index: 3; }
#nav li:hover ul { display: block; left: 266px; z-index: 3; }
#nav li:over ul { display: block; left: 266px; z-index: 3; } 





PHP Code:
<ul id="nav">
  <li><a href="HOBmain.htm"><img class="btn1" src="../mainbtn.gif" width="100" height="38" alt="MainBtn"></a></li>
  <li><a href="HOBmain.htm"><img class="btn2" src="../blogbtn.gif" width="100" height="38" alt="BlogBtn"></a>
    <ul>
      <li class="link1"><a href=""><img src="../mbtn.gif" alt="bMainBtn"></a></li>
      <li class="link2"><a href="#"><img src="../anmbtn.gif" alt="bAnimeBtn"></a></li>
      <li class="link3"><a href="#"><img src="../mgabtn.gif" alt="bMangaBtn"></a></li>
      <li class="link4"><a href="#"><img src="../gmebtn.gif" alt="bGameBtn"></a></li>
      <li class="link5"><a href="#"><img src="../bookbtn.gif" alt="bBookBtn"></a></li>
    </ul>
  </li>
    <li><a href="HOBmuse.htm"><img class="btn3" src="../musebtn.gif" width="100" height="38" alt="MuseBtn"></a>
    <ul>
      <li class="link2"><a href="HOBmuse.htm"><img src="../mbtn.gif" alt="mMainBtn"></a></li>
      <li class="link3"><a href="HOBmuse.htm"><img src="../pmbtn.gif" alt="mPoemBtn"></a></li>
      <li class="link4"><a href="HOBmuse.htm"><img src="../stybtn.gif" alt="mStoryBtn"></a></li>
      <li class="link5"><a href="HOBmuse.htm"><img src="../drmbtn.gif" alt="mDreamBtn"></a></li>
    </ul>
  </li>
   <li><a href="HOBodd.htm"><img class="btn4" src="../oddbtn.gif" width="100" height="38" alt="ComicBtn"></a>
    <ul>
      <li class="link3"><a href="HOBodd.htm"><img src="../mbtn.gif" alt="cMainBtn"></a></li>
    </ul>
  </li>
   <li><a href="HOBart.htm"><img class="btn5" src="../artbtn.gif" width="100" height="38" alt="ArtBtn"></a>
    <ul>
      <li class="link4"><a href="HOBart.htm"><img src="../mbtn.gif" alt="aMainBtn"></a></li>
      <li class="link5"><a href="HOBart.htm"><img src="../recbtn.gif" alt="aRecentBtn"></a></li>
      <li class="link6"><a href="HOBart.htm"><img src="../gaibtn.gif" alt="aGaiaBtn"></a></li>
    </ul>
  </li>
   <li><a href="HOBpic.htm"><img class="btn6" src="../picbtn.gif" width="100" height="38" alt="PicsBtn"></a>
    <ul>
      <li class="link5"><a href="HOBpic.htm"><img src="../mbtn.gif" alt="pMainBtn"></a></li>
      <li class="link6"><a href="HOBpic.htm"><img src="../recbtn.gif" alt="pRecentBtn"></a></li>
    </ul>
  </li>
   <li><a href="HOBfaq.htm"><img class="btn7" src="../faqbtn.gif" width="100" height="38" alt="FaqBtn"></a></li>
   <li><a href="HOBcon.htm"><img class="btn8" src="../contactbtn.gif" width="100" height="38" alt="ContactBtn"></a> </li>
</ul> 





<script type="text/javascript" src="drop_down.js"></script>
the "nav" is referring to a bit of js, and this is in my header. Also not sure if it's correct, but I can worry about that later.
link: The Page

Hi all,

I've got a horizontal menu that is working just fine in every browser but IE 6 and 7. In IE it's almost there, except that the submenus will only appear one level deep. The menu is created with nested lists. The :hover functionality is simulated via JavaScript for IE 6. The IE developer toolbar shows the 3rd level menu is correctly being changed to display: block when its parent is hovered, and the border the dev toolbar draws even puts it in the correct place, it just doesn't actually appear.

You can find the page he
http://www.perceptes.com/topdog/

The CSS and JS (uses jQuery) can be found he
http://www.perceptes.com/topdog/css/screen.css
http://www.perceptes.com/topdog/css/ie.css (loaded with a conditional comment)
http://www.perceptes.com/topdog/js/tdps.js
http://www.perceptes.com/topdog/js/ie.js (loaded with a conditonal comment)

For a specific example of what I'm talking about, try hovering over the second item, Filters & Parts. This will give you another level with four choices. Each of those also has child elements, but when hovered over, the next level doesn't appear. Try it in something other than IE 6 or 7 to see how it's supposed to look.

Thanks very much in advance!

I am having trouble with my CSS mouse over links. XHTML and CSS3 both validate. However the large image for the mouse over isn't showing. I have check everything I can think of and still am totally unable to figure it out. It has been years since I have built a web page and am trying again so this site has not been published as of yet but is still accessible to look at. Below is the link to my site and the external CSS style sheet. I also have CSS code on the XHTML page as well. Could someone please take a look and see what I am over looking?

Thank You
Selena

I made a mistake.. I'm not a student.

simplyselena.com and external style is simplyselena.com/css/styles.css
Sorry the above is the only way I could put url in not allowed to post url's as I am a new user account.

Greetings

I'm sure if I was cleverer I could figure this out for myself, but...
Also if I could figure out what the last person who more than likely already got an answer about this topic called it in their post, I might have found it in the search, but...

So, what I'm trying to do is this: I have a grid of images that link to a series of pages. To the right there is a standard navagation menu that also links to the same pages, and has a hover background color.

What I (and by "I" I really mean the person who I am building this for, since I wouldn't do it this way, but...) want to have happen is that when you mouseover the images they highlight the corresponding links in the navagation menu.

here is the css:
Code:

// the image grid
#left {
	float: left;
	height: auto;
	text-align: center;
	width: 810px;
}

#left ul {
	padding: 0px;
	list-style-type: none;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
}
#left img {
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
}

#left ul li {
	text-align: center;
	width: auto;
	float: left;
	margin-right: 15px;
	height: 200px;
	margin-bottom: 15px;
}
#left ul li a {
	text-decoration: none;
	color: #000000;
	display: block;
}

// the nav menu
#right {
	height: auto;
	width: 150px;
	float: left;
}
#right ul {
	width: 150px;
	list-style-type: none;
	margin: 0px;
	padding: 0px;
	float: right;
}
#right ul li {
	text-align: right;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	text-transform: uppercase;
}
#right ul li a {
	text-decoration: none;
	color: #000000;
	line-height: 38px;
	width: 135px;
	display: block;
	padding-right: 15px;
}
a.home:hover {
	background-color: #C6CED0;
}
a.bio:hover {
	background-color: #B4C2A1;
}
a.gallery:hover {
	background-color: #B4B281;
}
a.review:hover {
	background-color: #9A8F62;
}
a.current:hover {
	background-color: #AF8459;
}
a.past:hover {
	background-color: #AA8050;
}
a.contact:hover {
	background-color: #8A9B93;
}

...and here is the html:
Code:

<div id="left">
    	<ul>
      <li><a href="gallery_landscape.html"><img src="images/new_landscape_sm.jpg" alt="New Landscape"></a></li>
      <li><a href="#"><img src="images/new_landscape_sm.jpg" alt="New Landscape"></a></li>
      <li><a href="#"><img src="images/new_landscape_sm.jpg" alt="New Landscape"></a></li>
      <li><a href="#"><img src="images/new_landscape_sm.jpg" alt="New Landscape"></a></li>
      <li><a href="#"><img src="images/new_landscape_sm.jpg" alt="New Landscape"></a></li>
      <li><a href="#"><img src="images/new_landscape_sm.jpg" alt="New Landscape"></a></li>
      </ul>
    </div>
     <!--end left -->  
    <div id="right">
    <ul>
    <li><a class="home" href="armin.html">Home</a></li>
    <li><a class="bio" href="#">Landscape</a></li>
    <li><a class="gallery" href="#">Plein-Air</a></li>
    <li><a class="review" href="#">Non-Objective</a></li>
    <li><a class="current" href="#">The Figure</a></li>
    <li><a class="past" href="#">The West</a></li>
    <li><a class="contact" href="#">Comics</a></li>
    
    </ul>
    </div>
  <!--end right -->

Sorry for the long post, but I hope that makes sense...
Thanks in advance for any help.

Hi,
I have a link and an image next to each other. I want to make the link hovered when I do mouseover on image. How do I do that ?

Here is the code I have now.
<a href="javascript:undefined" id="imageLinkId">GMNA</a>&nbsp;

<script language="javascript">
if( ... ) {
document.write('<img src="/graphics/channel/plus.png" id="div18Img" alt="Maximize this section" onMouseOver= >'); }
else {
document.write('<img src="/graphics/channel/minus.png" id="div18Img" alt="Minimize this section" onMouseOver= >'); }
</script>

Thanks

I working on a CSS to display a round-shouldered-tab menu. My result is acceptable:
http://rickduley.webs.com/roundShoulderTabMenu.jpg
except for the fact that the tabs are set below the menuBar on which the are supposed to display.

I have run out of ideas. Would someone please set me on the right path?
Thanks.

P.S.: the code is at
http://rickduley.webs.com/roundShoulderTabMenu.zip.kgb -
you have to delete the 'dot key gee bee' suffix.

On my site I have a list of links on the left side. I keep them in an unordered list, and set the background image using css. I want to change the image on rollover. In Firefox I can just change it putting by :hover after an li in the style sheet as if it were an anchor, but IE won't accept that, and for some reason I can't get the style to change using javascript either. Any help appreciated- I know it's something really simple that I'm just not seeing. IE also won't display the hand cursor, but if I figure out how to get the image to change I can do the hand on my own at the same time. Firefox does everything right, so you can use that to see what i'm going for.

Have some (for me) a mysterious problem when mousing over an image inside a div.

I use javascript to change the class of a div when either onMouseOver or onClick of the div.
If I use onMouseOver to change the class of the div then the mousing over the image inside div is working fine.

If I use onClick to change the class of the div then the mousing over the image inside div is NOT working fine.
Why is that? Is there a way to make it work as I want?

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta name="Keywords" content="div, bug, onmouseover, onclick, image, ">
<meta name="Title" content="DIV onmouseover bug">
<meta name="Description" content="onmouseover over image inside DIV causes div onmouseout event to fire">

<title>onClick event of DIV causes mouseover of image in second example to make DIV hidden</title>

<style type="text/css">
 body { margin:0; padding:0; }
 .esmall { display:block; z-index:2; position:absolute; cursor:pointer; height:20px; width:300px; border:0; background-color:#a44; font-family:arial,sans-serif; font-size:12px; color:#fff; overflow:hidden; }
 .elarge { display:block; z-index:3; position:absolute; cursor:pointer; height:auto; width:300px; border:1px solid black; background-color:#fff; font-family:arial,sans-serif; font-size:12px; color:#000; overflow:hidden; }
</style>

</head>
<body>

<div id="div1" class="esmall" onmouseover="this.className='elarge'" onmouseout="this.className='esmall'" style="left:10px; top:50px;">
<div style="display:block; margin:2px;">
	MouseOver this div.<br><br>Then try to mouse over the image or the square below. Here it should work fine<br><br>
	<img src="event-edit.gif" alt="Edit" onclick="alert('Run som function here')" title="" border="1" height="15px" width="15px" style="background-color:red"><br><br>
</div>
</div>

<div id="div2" class="esmall" onclick="this.className='elarge'" onmouseout="this.className='esmall'" style="left:320px; top:50px;">
<div style="display:block; margin:2px;">
	Click here. Then try to mouseover image inside DIV<br><br>Then try to mouse over the image or the square below.<br><br> You will see that mousing over image causes the DIV to get its original size, as if you moved the mouse outside the div.<br><br>
	The only difference between the two divs a  First DIV uses onMouseOver and second uses onClick<br><br>
	I would like this one to work but without the div dissapearing when I mouseover/mouseout of the image below.<br>How do I make it work?<br><br>
	<img src="event-edit.gif" alt="Edit" onclick="alert('Run som function here')" title="Try to click me if you can" border="1" height="15px" width="15px" style="background-color:red;"><br><br>
	Tested in: FF, IE, OP NE<br><br>
	I use the nested divs to cope with some differences in padding behaviour between the browsers. It does not affect what I'm trying to do.
</div>
</div>

</body>
</html>

Hi.

I have just recently begun working with CSS. Is it possible with CSS (and without the use of any JavaScript) to have the background image change on a link mouseover?

I have the first image below (blue.jpg) set as my default background image and would like the second image (blue1.jpg) to display when the user hovers over a particular link.

URL
URL

Thanks for any help anyone can offer