1,105,450 Community Members

nav on pic

Member Avatar
davy_yg
Veteran Poster
1,119 posts since May 2011
Reputation Points: 0 [?]
Q&As Helped to Solve: 1 [?]
Skill Endorsements: 1 [?]
 
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.

Member Avatar
JorgeM
IT Addict
6,421 posts since Dec 2011
Reputation Points: 581 [?]
Q&As Helped to Solve: 963 [?]
Skill Endorsements: 172 [?]
Moderator
Featured
Sponsor
 
0
 

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
davy_yg
Veteran Poster
1,119 posts since May 2011
Reputation Points: 0 [?]
Q&As Helped to Solve: 1 [?]
Skill Endorsements: 1 [?]
 
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?

Member Avatar
JorgeM
IT Addict
6,421 posts since Dec 2011
Reputation Points: 581 [?]
Q&As Helped to Solve: 963 [?]
Skill Endorsements: 172 [?]
Moderator
Featured
Sponsor
 
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/

Member Avatar
davy_yg
Veteran Poster
1,119 posts since May 2011
Reputation Points: 0 [?]
Q&As Helped to Solve: 1 [?]
Skill Endorsements: 1 [?]
 
0
 

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
fheppell
Junior Poster
127 posts since Mar 2012
Reputation Points: 0 [?]
Q&As Helped to Solve: 3 [?]
Skill Endorsements: 0 [?]
 
0
 

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

Member Avatar
davy_yg
Veteran Poster
1,119 posts since May 2011
Reputation Points: 0 [?]
Q&As Helped to Solve: 1 [?]
Skill Endorsements: 1 [?]
 
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.

Member Avatar
JorgeM
IT Addict
6,421 posts since Dec 2011
Reputation Points: 581 [?]
Q&As Helped to Solve: 963 [?]
Skill Endorsements: 172 [?]
Moderator
Featured
Sponsor
 
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...

Member Avatar
davy_yg
Veteran Poster
1,119 posts since May 2011
Reputation Points: 0 [?]
Q&As Helped to Solve: 1 [?]
Skill Endorsements: 1 [?]
 
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.

Member Avatar
davy_yg
Veteran Poster
1,119 posts since May 2011
Reputation Points: 0 [?]
Q&As Helped to Solve: 1 [?]
Skill Endorsements: 1 [?]
 
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 three months: Start a new discussion instead
Post:
Start New Discussion
Tags Related to this Article