/    Sign up×
Community /Pin to ProfileBookmark

[RESOLVED] Swap "hyperlink" text-based w/mouseover/mouseout

Copy linkTweet thisAlerts:
Jan 14.2008

All I could find is swap image-based threads in this forum and google. Is there any thread or know where I can find an example or tutorial on swap “hyperlink” text-based w/mouseover/mouseout (prefer an array function that can deal with multiple hyperlink texts)? E.g. rollover “Link1” text and it swap with other text, then when rollout it, it swaps back to “Link1” text.

Appreciate help in advance!

monkeybloke

to post a comment
JavaScript

3 Comments(s) ↴

Copy linkTweet thisAlerts:
@gil_davisJan 15.2008 — Here is one way:
<i>
</i>&lt;html&gt;
&lt;head&gt;
&lt;style type="text/css"&gt;
a .tt {
display: none;
}
&lt;/style&gt;
&lt;script type="text/javascript"&gt;
var st;
function myOver(it) {
st = it.firstChild.data;
it.firstChild.data = it.lastChild.firstChild.data;
}
function myOut(it) {
it.firstChild.data = st;
}
&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;a href="#" onmouseover="myOver(this)" onmouseout="myOut(this)"&gt;text1&lt;span class="tt"&gt;text2&lt;/span&gt;&lt;/a&gt;
&lt;/body&gt;
&lt;/html&gt;
Copy linkTweet thisAlerts:
@monkeyblokeauthorJan 15.2008 — That's so simple and nifty thing. Basically both texts switch their places in span element with mouseover/mouseout right? Any downside to consider using this script beside "disable javascript" option in the browser?

Thanks again for sharing your example!

monkeybloke
Copy linkTweet thisAlerts:
@gil_davisJan 15.2008 — There is always a possible accessibility problem with javascript. People with screen readers won't be able to navigate.
×

Success!

Help @monkeybloke spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 6.16,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @nearjob,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...