Textpattern CMS support forum
You are not logged in. Register | Login | Help
- Topics: Active | Unanswered
Javascript tool for changing text on hover state
Looking for a javascript that allows me to change the text of a div when hovering over an image. There will be 6 images which will link to TXP categories. Clicking on the image should take the user to that category.
I know about ako_boxover (about to test it), but thought I should canvas some opinions on useful scripts.
What I really need is that the text appears in a div below, not the usual boxover thing where the text displays next to the image. Plus – I need to have some default text appear in the div when the page is accessed and before the image is hovered over.
Hope this makes sense!
Offline
Re: Javascript tool for changing text on hover state
var tmp;
$("#image_id").hover(
function () {
tmp=$("#element_id_you_wanna_to_change").text(); //just remember previous content. you can use html() instead
$("#element_id_you_wanna_to_change").text('New text');
},
function () {
$("#element_id_you_wanna_to_change").text(tmp);
}
);Should work! Just tested ;) Try to read Selectors and Manipulation
jQuery is nice tool :)
P.S. If you have tags inside your manipulated objects you should use html(). And don’t forget to plug-in jQuery to your page – <script src="http://jqueryjs.googlecode.com/files/jquery-1.2.1.pack.js" type="text/javascript"></script> :) But it’s better to host js-file at your host :)
Last edited by the_ghost (2007-12-05 01:59:23)
Providing help in hacking ATM! Come to courses and don’t forget to bring us notebook and hammer! What for notebook? What a kind of hacker you are without notebok?
Offline
Re: Javascript tool for changing text on hover state
Thanks for this Victor! I am looking at a plugin at the moment, but will for sure check out your code. All the areas that have #image_id and #element_id… need to be changed, I presume?
And would this work with a series of 6 images? (Like a small gallery, with a short description appearing underneath)?
Offline
Re: Javascript tool for changing text on hover state
If you are going to manipulate with more than 1 object you should use another selector, ‘cos pointing to elements with equal “id” values will effect only first of them. For example, you can add any class to element:
<img class="just_forscript" src="1.jpg" /> - image to run hover event
<div id="change_me" /></div> - div with changeable content
var tmp;
$(".just_forscript").hover(
function () {
tmp=$("#change_me").text(); //just remember previous content. you can use html() instead
$("#change_me").text('New text');
},
function () {
$("#change_me").text(tmp);
}
);Last edited by the_ghost (2007-12-06 08:53:07)
Providing help in hacking ATM! Come to courses and don’t forget to bring us notebook and hammer! What for notebook? What a kind of hacker you are without notebok?
Offline