Member Avatar for penguino138

Hello! I'm doing a website project for English class and am having trouble with my interactive menu. I've attached the menu pictures so you can hopefully help. Below is the HTML code. What I would like to do is be able to run this in Internet Explorer because that's what our school computers use. I know it has something to do with the onmouseover and onmouseout, but I'm not sure. Thanks!

<html>
<head>
</head>
<title>EVEREST EXPEDITIONS</title>




<body>
<a href="main.html"
onmouseover="document.mainlogo.src='mainlogomouseover.jpg'"
onmouseout="document.mainlogo.src='mainlogo.jpg'">
<img src="mainlogo.jpg" alt="Come Climb With Us!" name="mainlogo" /></a>
</br>
<img src="links.jpg" alt="Pick a link!" name="linkspicture" usemap="links" />

<map name="links" >
<area shape="rect" coords="0,0,152,70" alt="Pictures and Videos" href="media.html" onmouseover="document.linkspicture.src='medialink.jpg'" onmouseout="document.linkspicture.src='links.jpg'">
<area shape="rect" coords="152,0,263,70" alt="Join The Team" href="join.html" onmouseover="document.linkspicture.src='joinlink.jpg'" onmouseout="document.jinkspicture.src='links.jpg'">
<area shape="rect" coords="263,0,511,70" alt="Expeditions" href="expeditions.html" onmouseover="document.linkspicture.src='expeditionslink.jpg'" onmouseout="document.linkspicture.src='links.jpg'">
<area shape="rect" coords="511,0,720,70" alt="About Us" href="aboutus.html" onmouseover="document.linkspicture.src='aboutuslink.jpg'" onmouseout="document.linkspicture.src='links.jpg'">
</map>




</body>




</html>
aboutuslink.jpg 21.81 KB expeditionslink.jpg 21.72 KB joinlink.jpg 21.97 KB links.jpg 21.96 KB medialink.jpg 21.67 KB
  • 2 Contributors
  • 7 Replies
  • 225 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by penguino138
Member Avatar for lps

What I understand about your code is you wish to create hover effect on your menu. Probably my code can help you.

<div class="sf-menu">
	<li><a href="#">HOME</a></li>
	<li><a href="#" > ABOUT US </a>
	<li><a href="#" > CONTACT US </a></li>
</div><!-- end of sf-menu -->

On the css:

.sf-menu ul li a{
	padding:20px;/**to set the link to make it look like boxes**/
	background:#e5e5e5;/**set the background color of boxes**/
	text-decoration:none;/**remove the underline of the link**/
	color:#fff;/**change the color of the link**/
}
.sf-menu ul li a:hover{
	color:#1e1e1e;/**change the color of the link when it is mouseover**/
	background:cyan;/**change the background color when it is mouseover**/
}
Member Avatar for penguino138

I tried what you gave me, but it doesn't work. Please note I only know VERY basic CSS so I may be missing something. My code looks like this now:

<html>
<head>
</head>
<title>EVEREST EXPEDITIONS</title>
<style type="text/css">
.sf-menu ul li a{
	padding:20px;/**to set the link to make it look like boxes**/
	background:#e5e5e5;/**set the background color of boxes**/
	text-decoration:none;/**remove the underline of the link**/
	color:#fff;/**change the color of the link**/
}
.sf-menu ul li a:hover{
	color:#1e1e1e;/**change the color of the link when it is mouseover**/
	background:cyan;/**change the background color when it is mouseover**/
}

</style>
<body>
<a href="main.html"
onmouseover="document.mainlogo.src='mainlogomouseover.jpg'"
onmouseout="document.mainlogo.src='mainlogo.jpg'">
<img src="mainlogo.jpg" alt="Come Climb With Us!" name="mainlogo" /></a>
</br>
<img src="links.jpg" alt="Pick a link!" name="linkspicture" usemap="links" />

<map name="links" >
<area shape="rect" coords="0,0,152,70" alt="Pictures and Videos" href="media.html" onmouseover="document.linkspicture.src='medialink.jpg'" onmouseout="document.linkspicture.src='links.jpg'">
<area shape="rect" coords="152,0,263,70" alt="Join The Team" href="join.html" onmouseover="document.linkspicture.src='joinlink.jpg'" onmouseout="document.jinkspicture.src='links.jpg'">
<area shape="rect" coords="263,0,511,70" alt="Expeditions" href="expeditions.html" onmouseover="document.linkspicture.src='expeditionslink.jpg'" onmouseout="document.linkspicture.src='links.jpg'">
<area shape="rect" coords="511,0,720,70" alt="About Us" href="aboutus.html" onmouseover="document.linkspicture.src='aboutuslink.jpg'" onmouseout="document.linkspicture.src='links.jpg'">
</map>

<div class="sf-menu">
	<li><a href="main.html">HOME</a></li>
	<li><a href="aboutus.html" > ABOUT US </a>
	<li><a href="past.html" > CONTACT US </a></li>
</div><!-- end of sf-menu -->



</body>




</html>
Member Avatar for penguino138

Any help? This is part of a school assignment thats due very soon

Member Avatar for lps

Sry, I forgot to put the <ul> tag inside the code. Exact code is something like this:\

<!DOCTYPE html>
    <html>
		<title>EVEREST EXPEDITIONS</title>
		<style type="text/css">
			.sf-menu ul{
				list-style:none;/**to remove the bullet infront**/
			}
			.sf-menu li{
				padding:20px;/**must be at least the padding below so that the links is not packed**/
			}
			.sf-menu li a{
				padding:20px;/**to set the link to make it look like boxes**/
				background:#e5e5e5;/**set the background color of boxes**/
				text-decoration:none;/**remove the underline of the link**/
				color:#fff;/**change the color of the link**/
			}
			.sf-menu li a:hover{
				color:#1e1e1e;/**change the color of the link when it is mouseover**/
				background:cyan;/**change the background color when it is mouseover**/
			}
		</style>
		<body>
			<a href="main.html">
			<img src="mainlogo.jpg" alt="Come Climb With Us!" name="mainlogo" /></a>
			</br>
			<img src="links.jpg" alt="Pick a link!" name="linkspicture" usemap="links" />
			 
			<map name="links" >
				<area shape="rect" coords="0,0,152,70" alt="Pictures and Videos" href="media.html" onmouseover="document.linkspicture.src='medialink.jpg'" onmouseout="document.linkspicture.src='links.jpg'">
				<area shape="rect" coords="152,0,263,70" alt="Join The Team" href="join.html" onmouseover="document.linkspicture.src='joinlink.jpg'" onmouseout="document.jinkspicture.src='links.jpg'">
				<area shape="rect" coords="263,0,511,70" alt="Expeditions" href="expeditions.html" onmouseover="document.linkspicture.src='expeditionslink.jpg'" onmouseout="document.linkspicture.src='links.jpg'">
				<area shape="rect" coords="511,0,720,70" alt="About Us" href="aboutus.html" onmouseover="document.linkspicture.src='aboutuslink.jpg'" onmouseout="document.linkspicture.src='links.jpg'">
			</map>
			 
			<div class="sf-menu">
				<ul>
				<li><a href="main.html">HOME</a></li>
				<li><a href="aboutus.html" > ABOUT US </a></li>
				<li><a href="past.html" > CONTACT US </a></li>
				</ul>
			</div><!-- end of sf-menu -->
		</body>
    </html>

And,please don't forget the doctype as it is needed for inter browser compability.

Edited by lps because: n/a
Member Avatar for penguino138

Oh thank you! So I just take out the list if I want it to be horizontal, not vertical right?

Member Avatar for lps

No, we normally do not take out the list. In horizontal, you may try to style the li to float:left; or try research online for display:inline; property. Can refer the API of w3school.

Edited by lps because: n/a
Member Avatar for penguino138

Actually, I made it go horizontal. But now I have another problem. On one of my pages, all the text is different size. I'll paste files below. Compare join.html to media.html.

media.html:

<body>
<a href="main.html"
onmouseover="document.mainlogo.src='mainlogomouseover.jpg'"
onmouseout="document.mainlogo.src='mainlogo.jpg'">
<img src="mainlogo.jpg" alt="Come Climb With Us!" name="mainlogo" /></a>

<div class="sf-menu">
				
				<p>
				<a href="main.html">HOME</a>
				<a href="m.html">PICTURES AND VIDEOS</a>
				<a href="join.html">JOIN US</a>
				<a href="expeditions.html">EXPEDITIONS</a>
				<a href="aboutus.html">ABOUT US</a></p>
			</div>

<h1>Pictures</h1>
<p>Below are just a few of the many pictures we take on Everest. Almost everyone goes on an exbedition with a camera, because there are so many beautiful sights.</p>

<!-- Insert at least 5 pictures here -->
<center> 
<img src="" alt-="" /></br></br>
<img src="" alt-="" /></br></br>
<img src="" alt-="" /></br></br>
<img src="" alt-="" /></br></br>
<img src="" alt-="" /></br></br>
 
 
</center>
</br></br>
<h1>Videos</h1>
<p>Taking video on Everest can be a difficult task, as the freezing temperatures make it hard for a video camera to work. Most of time, special video cameras are purchased just to be able to record things.</p>
<center>
<!-- Insert at least 3 videos here -->



</center>
</body>




</html>

join.html:

<!DOCTYPE html><html>
<head>
</head>
<title>EVEREST EXPEDITIONS</title>
<link href="basic.css" rel="stylesheet" />


<body>
<a href="main.html"
onmouseover="document.mainlogo.src='mainlogomouseover.jpg'"
onmouseout="document.mainlogo.src='mainlogo.jpg'">
<img src="mainlogo.jpg" alt="Come Climb With Us!" name="mainlogo" /></a>

<div class="sf-menu">
				
				<p>
				<a href="main.html">HOME</a>
				<a href="media.html">PICTURES AND VIDEOS</a>
				<a href="join.html">JOIN US</a>
				<a href="expeditions.html">EXPEDITIONS</a>
				<a href="aboutus.html">ABOUT US</a></p>
			</div>

<p>If you would like to be in one of our award winning expeditions, all you have to do is fill out the form below. We will evaluate your application, and then email you within 3 weeks with an answer.</p>

<h1>Signing Up Is Easy</h1>
<p>
<form action=mailto:Natelovell99@gmail.com>
	<label>Enter you email address:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <input type="text" size="30" /> </label></br>
	<label>Re-enter your email address: <input type="text" size="30"/>
</label>


</br></br>
<label>Gender: <select>
<option value="">Select Your Gender</option>
<option value="Male">Male</option>
<option value="Female">Female</option>
<option value="Undecided">Undecided</option>
</select>
</label>
</br></br>
<label>Country of Origin:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <input type="text" size="30" />
</label>

</br></br>
<label>Reason Why You Want To Climb (Check all that apply)
</br><input type="checkbox" value="Yes" />I have a lot of money
</label></br>
<label><input type="checkbox" value="Yes" />I'm an avid climber</label></br>
<label><input type="checkbox" value="Yes" />I want to experience something new and exciting</label></br>
<label><input type="checkbox" value="Yes" />I want to push my body to the limits</label></br>
<label><input type="checkbox" value="Yes" />I'm looking for a spritual experience</label>
</br></br></br>
<p>Please tell us about your life, job, and experiences.</br>
<textarea rows="10" cols="50"></textarea>
</br></br>
PLEASE ENSURE ALL OF THE ABOVE INFORMATION IS CORRECT!</br></br>
<label><input type="submit" value="Submit"><label>

<form>


</p>
</body>




</html>

and finally,
basic.css:

.sf-menu p{
				padding:20px;/**must be at least the padding below so that the links is not packed**/
			}
			.sf-menu p a{
				padding:20px;/**to set the link to make it look like boxes**/
				background:lightblue;/**set the background color of boxes**/
				text-decoration:none;/**remove the underline of the link**/
				color:black;/**change the color of the link**/
			}
			.sf-menu p a:hover{
				color:black;/**change the color of the link when it is mouseover**/
				background:darkgrey;/**change the background color when it is mouseover**/
			}

h1 {
	font-family: Eras Demi ITC, sans-serif;
	background-color: lightblue;
	font-size: 50;
}

h2 {
	font-family: Eras Demi ITC, sans-serif;
	background-color: lightblue;
	color: darkblue;
}

p {
	font-family: Eras Demi ITC, sans-serif;
	font-size: 20;
}
center{
	font-family: Eras Demi ITC, sans-serif;
	font-size: 20;
}

Hope you can help!

mainlogo.jpg 48.57 KB mainlogomouseover.jpg 43.85 KB
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.