Search jQuery

jQuery Forum

Image rollover

in Getting Started • 10 years ago

I apologize if I could be in the wrong section of the forum. I'm new to jQuery and really need some help or a link suggestion.

I am creating an entry point to a website that will be entirely set in WordPress, but the splash page I'm working on is HTML. Have a look at this: http://thebig4cast.com/cir2.html

I'm not much of a coder, but I want to create an effect that when you hover one of the logos at the bottom, inside the ring, in the blue, a description of the item would show up. I was going to go back to ImageReady (yes, my skills are dated and limited) to create rollover states, but I believe I should be able to do this with jQuery. I'm also afraid that whatever dirty code ImageReady would generate, could be unreadable in mobile devices. Any help in this situation would be much appreciated.

Basically, on hover, I would like a show description to pop up in the blue area, and when clicked that link would take you to more info, directly to a php page in WordPress. Thanks so much in advance.

Replies(6)

chrisvill..

Re: Image rollover

10 years ago

hi!

this isn't very difficult. you can do it with the following steps:

1.) create a wordpress "homepage.php" file for the xhtml markup. the markup should include divs that represent content for each menu button (radio active metal, iron city rocks, etc.). each menu button can images wrapped by an anchor tag.

2.) create your css layout for this page. in your css, set menu content divs to "display:none" so the information will not show up on page load.

3.) use jquery .hover to respond to a user mouse over event on any menu image/button. within the .hover method, create a function that will find the related content div with a valid jquery selector. once you know which content to show, use .show to display the information in that blue area within your page.

4.) you can add a .click method to send users to any valid url within wordpress.

dariosycco

Re: Re: Image rollover

10 years ago

Thank you very much. I will give this a try. I'm not very good at this. I'm an old school WISIWIG guy, not very technical.

chrisvill..

Re: Image rollover

10 years ago

no problem.

when you have some xhtml, css, and some javascript, i can help out more.

just need to see some source.

dariosycco

Re: Re: Image rollover

10 years ago

http://www.thebig4cast.com/castironring/

I sliced the artwork and made rollovers in photoshop, but can't seem to assign more than one image swap to a slice.

The one JPG that needs to swap out is called "index-05.jpg" (which is the center of the ring) and depending on what it swaps with, it would be replaced with images from "over" folder inside "images" folder.

Fo example, "images/shows-ram1.jpg" needs to swap with "images/over/shows-ram2.jpg" which it does, but in addition, on hover over "images/shows-ram1.jpg" the (ring centre) slice called "index-05.jpg" also needs to swap with "images/over/swap-ram.jpg". I know this is down and dirty, but I don't know any other way of doing this, and can't figure out how to add this to code. Any help is very much appreciated. Thanks.

chrisvill..