PDA

View Full Version : Image rollovers w/ different sizes (drop down menu)


xboxdynasty
09-14-2011, 08:42 PM
Okay I am trying to code this layout:

http://i109.photobucket.com/albums/n67/xboxdynasty/HOME.jpg

That's what it will look like when the content blocks are in and everything.

My problem is I want to rollover a button like:

http://i109.photobucket.com/albums/n67/xboxdynasty/main_b.png

And it bring a drop down box like this:

http://i109.photobucket.com/albums/n67/xboxdynasty/main.png

Which then looks like this:

http://i109.photobucket.com/albums/n67/xboxdynasty/MAIN_TAB.jpg


My problem is I don't know how to do rollovers with different size target and display images. I considered capturing the frame of the whole drop down box but I have things under the button I don't want hover to activate.

Any ideas?

johnMoss
09-14-2011, 09:37 PM
I am assuming you know how to create a spry menu bar. If so, you can CSS the drop down box to the necessary proportions, and then use a transparent gif image as your drop-down background. Transparent meaning it will have the top right corner shaved off as it is in your design. Nice work BTW...

xboxdynasty
09-17-2011, 12:31 AM
I am assuming you know how to create a spry menu bar. If so, you can CSS the drop down box to the necessary proportions, and then use a transparent gif image as your drop-down background. Transparent meaning it will have the top right corner shaved off as it is in your design. Nice work BTW...

Thanks, things are going pretty well with that suggestion.

I have a few questions about spry as a result. Please take a look at this:

http://reac.students.mtu.edu/REAC/Webmaster/Test/REAC/index.html

I can't get the extra blue padding to go away. I have all the settings to no padding and no bg color. Shouldn't a .png be showing up as transparent in the null areas?

Also the hover area is too big (on the right side). The image size was reduced with the width property but there seems to be a minimum width for the menu.

How am I going to add hyperlinks to the drop down now?

Any ideas other than iframes to make my content pop up in my content <div>?

Yay development! ....http://reac.students.mtu.edu/REAC/Webmaster/Test/REAC/untitled.JPG