Textpattern Forum

You are not logged in. Register | Login | Help

#1 2007-12-04 20:37:59

jstubbs
Moderator
From: Hong Kong
Registered: 2004-12-13
Posts: 2,150
Website

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!


TXP Tips | @txptips | Me | @jonathanstubbs | Github

TXP Builders – finely-crafted code, design and txp @txpbuilders

Offline

#2 2007-12-05 01:51:46

the_ghost
Plugin Author
From: Minsk, The Republic of Belarus
Registered: 2007-07-26
Posts: 907
Website

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

#3 2007-12-05 20:13:40

jstubbs
Moderator
From: Hong Kong
Registered: 2004-12-13
Posts: 2,150
Website

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)?


TXP Tips | @txptips | Me | @jonathanstubbs | Github

TXP Builders – finely-crafted code, design and txp @txpbuilders

Offline

#4 2007-12-06 08:52:34

the_ghost
Plugin Author
From: Minsk, The Republic of Belarus
Registered: 2007-07-26
Posts: 907
Website

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

Board footer

Powered by FluxBB