1.11M Members

nav on pic

 
0
 

Hello,

I am trying to create a navigation on a picture. How to do so?

This is what I have:

indonusa/cloud.php

<img src="images/CloudS.jpg">


<div id="nav1"><a href="#"><img src="images/cloud-nav11.jpg"></a></div>
<div id="nav2"><a href="#"><img src="images/cloud-nav21.jpg"></a></div>
<div id="nav3"><a href="#"><img src="images/cloud-nav31.jpg"></a></div>
<div id="nav4"><a href="#"><img src="images/cloud-nav41.jpg"></a></div>



</div>

indonusa/css/product.css

#nav1{ background:url('../images/CloudNav.jpg') 0 0; margin: -325px 0 0 40px; }
#nav1 a:hover{ background:url('../images/CloudNav.jpg') 0 -50px; margin: -325px 0 0 40px; }
#nav2{ background:url('') 0 0; margin: 10px 0 0 40px;}
#nav3{ background:url('') 0 0; margin: 5px 0 0 40px;}
#nav4{ background:url('') 0 0; margin: 10px 0 0 40px;}

I am still testing the first nav button and that does not work. The navigation picture does not appears. Why is it? I am quite sure that the address is correct. I have Cloud.JPEG file inside of images folder. I already try changing the file name to Cloud.JPEG in my css and that does not work either.

Please help. Thanks before.

 
0
 

No pictures appear? Are you using Chrome? If so, use your dev tools to verify if you are getting 404 not found errors.

 
0
 

Hello,

I made a revision:

css/product.css

#nav1{ background:url('../images/CloudNav.jpg') 0 -50px; margin: -325px 0 0 40px; height: 50px; width: 250px; z-index: 1;}
#nav1 a:hover{ background:url('../images/CloudNav.jpg') 0 -100px;  margin: -325px 0 0 40px; height: 50px; width: 250px; z-index: 1;}

cloud.php

div id="nav1"><a href="#"></a></div>
<div id="nav2"><a href="#"></a></div>
<div id="nav3"><a href="#"></a></div>
<div id="nav4"><a href="#"></a></div>

Now what appears is only a static nav button. When I hover on it the button does not change. Why is it?

 
0
 

Ok, so i'm not exactly how you are envisioning this, but it sounds to me like you are trying to create a navigational menu with a background that when hovered, the background shifts?

Here is a quick example i put together..

<!DOCTYPE html>
<html>
<head>
<style>
#navmenu {position:relative;}
#navmenu li {margin:0;padding:0;list-style:none;position:absolute;top:0;}
#navmenu li, #navmenu a {height:44px;display:block;}

#nav1 {left:0px;width:250px;border:1px solid black;}
#nav1 {background:url('clouds.jpg') 0 0;}
#nav1 a:hover {background: url('clouds.jpg') 0 -50px;}

#nav2 {left:252px;width:250px;border:1px solid black;}
#nav2 {background:url('clouds.jpg') -50px 0;}
#nav2 a:hover {background: url('clouds.jpg') 0px -50px;}

#nav3 {left:504px;width:250px;border:1px solid black;}
#nav3 {background:url('clouds.jpg') -100px 0;}
#nav3 a:hover {background: url('clouds.jpg') 0px -50px;}
</style>
</head>

<body>
<ul id="navmenu">
  <li id="nav1"><a href="#"></a></li>
  <li id="nav2"><a href="#"></a></li>
  <li id="nav3"><a href="#"></a></li>
</ul>
</body>
</html>

hope it helps... also, uploaded a demo online to look at: http://itg.somee.com/dw/dw-465190/

 
0
 

ok, check this out: cloud

I wonder why the Cloud Server button does not change on hover. I thought I already coded right.

 
0
 

A lot of the images are coming up as 404, which is probably why.

 
0
 

Those two other images I didn't upload them to the web server. Don't worry about them. I only concern about the image that I upload on the webserver, which is the cloud server button. The same image has many buttons in it (CloudNav.jpg).

I only wonder why the image does not change on hover.

 
0
 

Check your page/site, it takes quite a bit of time to load and it never fully completes the load. There are no nav pictures and it doesnt appear that the style sheet loaded properly either...

 
0
 

I have a better view offline. It's not my real site since I only uploaded several important images online. I only needs to get the logic correctly. If I can the cloud server button works then that's enough. I can get the rest to work and I only get stuck on the cloud server button and wonder why it doesn't change on hover.

Try to use firebug to check it.

The color of the cloud server button suppose to change from dark blue to light blue on hover.

 
0
 

I wonder why the background only appears if I type text on the link:

<ul id="cloudmenu">
<li id="nav1"><a href="#">THISISTHENEWBUTTON</a></li>
<li id="nav2"><a href="#"></a></li>
<li id="nav3"><a href="#"></a></li>
<li id="nav4"><a href="#"></a></li>
</ul>
You
This article has been dead for over six months: Start a new discussion instead
Post:
Start New Discussion
Tags Related to this Article