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
  • 184 Views
  • 1 Week Discussion Span
  • Latest Post Latest Post by davy_yg

Dani AI

Generated

Most likely cause: the clickable <a> had no visible box (or contained an <img> that covered any CSS background), so the hover sprite never showed. As found in post #10, adding link text made the background appear — a classic sign that the anchor was inline and had no width/height. 's suggestion to check DevTools and 's note about 404s are both relevant: verify the sprite path (case matters on Linux) and confirm there are no network errors.

Practical fix: place the base picture in a positioned container, make each nav link an absolutely positioned, block-level element sized to the sprite tile, and apply the sprite to the link itself (not to an <img> inside the link). Ensure the container is position:relative and the link is position:absolute with a z-index so it sits above the image. Keep accessible text inside the link (visually hidden) or use aria-label.

Example (adapted approach):

<div class="cloud-panel">
  <img src="images/CloudS.jpg" alt="Cloud artwork" />
  <a href="#" class="cloud-btn" aria-label="Cloud Server">Cloud Server</a>
</div>
.cloud-panel { position: relative; display: inline-block; }
.cloud-panel img { display: block; }

.cloud-btn {
  position: absolute;
  top: 40px; left: 40px;      /* place over image */
  display: block;
  width: 250px; height: 50px; /* sprite tile size */
  background: url("../images/CloudNav-sprite.png") 0 0 no-repeat;
  text-indent: -9999px; overflow: hidden; /* keeps label for screen readers */
  z-index: 10;
}
.cloud-btn:hover { background-position: 0 -50px; }

Troubleshooting checklist: confirm the sprite filename and extension/case exactly, check the CSS file path (background URLs are relative to the CSS file), use DevTools Network tab to spot 404s and the Elements/Computed panels to see which element has the background, and remember z-index only works on positioned elements. This pattern avoids inline <img> overlays and makes hover sprites reliable.

Recommended Answers

All 9 Replies

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:

Edited by JorgeM
Member Avatar for davy_yg

ok, check this out:

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.