HTML/Dreamweaver help?

Hello folks, I am trying to create angled buttons in Dreamweaver that use a hotspot map for a hoverover, but the image box is screwing with my hotspot. Anyone know how to help?

Here is my site for a visual of whats happening http://jellisarts.com/ the buttons are the ones on the left (derp).

Seems to be working except for the last button.

Quote:

---

Originally Posted by Untradeable

Seems to be working except for the last button.

---

Sorry, I completely changed my approach with it instead. Originally I was using separate button, but now they are one image, and Im using hotspots to swap out a whole new image for each menu option. Not the best way to do it, but it works in the end.

Quote:

---

Originally Posted by Sn1perJohnE

Sorry, I completely changed my approach with it instead. Originally I was using separate button, but now they are one image, and Im using hotspots to swap out a whole new image for each menu option. Not the best way to do it, but it works in the end.

---

thats not a very good practice though. it can actually be done without having to have the browser load 5 seperate images.

make the image similar to this :

http://i.imgur.com/NUkszAY.png

and then use css to adjust the position when hovered :

HTML Code:

---

#mainlink:hover{
background-position: 0 0;
}

---

granted, your images are just a few small ones, but its a good practice.

Quote:

---

Originally Posted by DeanNim

thats not a very good practice though. it can actually be done without having to have the browser load 5 seperate images.

make the image similar to this :

http://i.imgur.com/NUkszAY.png

and then use css to adjust the position when hovered :

HTML Code:

---

#mainlink:hover{
background-position: 0 0;
}

---

granted, your images are just a few small ones, but its a good practice.

---

My only issue would be where I started. The image I want to use is tilted so that if each individual button overlaps the transparent part of each other, it sees the hotspot area only of the front most box, which means the lowest on the buttons works right while then others don't.

Another issue would be creating the single image rollover where each of the menu options has its rollover. It would be the case of one giant image versus 5 small images, and each small image is only about 3~5 kilobytes, which is very minimal.

I think a different approach would be using one image and using CSS to style each rollover section. It might not create the same colorful result but it may work well too.

Quote:

---

Originally Posted by Sn1perJohnE

Another issue would be creating the single image rollover where each of the menu options has its rollover. It would be the case of one giant image versus 5 small images, and each small image is only about 3~5 kilobytes, which is very minimal.

---

Since its just a simple navigation i dont see anything wrong with it either, but when it comes to huge images, its just better to use a giant image because swapping images onhover will not have all the images ready on page load, so for users with slower connections, it would be another common case of missing button onhover.

I myself have experienced buttons going missing when i hover on them, which is frankly quite annoying.... considering i have pretty speedy internet.

Quote:

---

Originally Posted by DeanNim

Since its just a simple navigation i dont see anything wrong with it either, but when it comes to huge images, its just better to use a giant image because swapping images onhover will not have all the images ready on page load, so for users with slower connections, it would be another common case of missing button onhover.

I myself have experienced buttons going missing when i hover on them, which is frankly quite annoying.... considering i have pretty speedy internet.

---

I like using the load image on page load. Haha