[Question] Trying to have a mouseover that works like a tooltip but....

zaphodbeeb

I'm just wondering has anyone come across a simple Javascript / jQuery way of having a series of links in a left hand sidebar (in Wordpress for example) that when you mouse over them changes the content in the main page area.

Just to be clearer, I've made up a simple graphic to illustrate what I'm after.

I'm sure there is a simple method out there to do this, just haven't come across it yet.

Thanks in advance for any suggestions!

-ZB

Liam Byrne

Easy to do if you know jQuery (and possibly AJAX)

Check out $.get or $.load within jQuery

Be warned, though - the issues are :

1) Where is the content for the div coming from (best loaded via AJAX)
2) Search engines can't run JavaScript and so will never see the content of the "rollover pages"

zaphodbeeb

Sorry, should've pointed out that I'm clueless on jQuery etc.

Was kinda hoping someone had implemented this from a web tutorial or such and could post the link.

I do have a version that works as Tooltips, the only difference really is that the size of the "tooltip" is fixed as is it's position.

Creamy Goodness

you're very rarely going to get something that will just work out of the box for you.

look into the jquery methods that liam bryne posted, google some examples of these and see how they work. once you know how they work it's as simple as changing the content that they return.

zaphodbeeb

...will post back if I find anything useful.

In the meantime in the unlikely event that someone finds the yoke I'm after, please post it here :-)

Thanks for help so far.

-ZB

Liam Byrne

Samples here (using click instead of hover)

http://jqueryfordesigners.com/demo/coda-slider.html

http://css-tricks.com/examples/MenuFader/

zaphodbeeb

They seem very complex so I'll try just standard Javascript for now. I have found one that kinda works except I can't get it to work properly within wordpress.