Member Avatar for davy_yg

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.

  • 3 Contributors
  • 9 Replies
  • 169 Views
  • 1 Week Discussion Span
  • Latest Post Latest Post by davy_yg
Member Avatar for JorgeM

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

Member Avatar for davy_yg

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?

Member Avatar for JorgeM

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/

Edited by JorgeM
Member Avatar for davy_yg

ok, check this out: cloud

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

Member Avatar for fheppell

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

Member Avatar for davy_yg

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.

Member Avatar for JorgeM

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...

Member Avatar for davy_yg

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.

Edited by davy_yg
Member Avatar for davy_yg

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>
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.