/    Sign up×
Community /Pin to ProfileBookmark

Onhover text replace

Copy linkTweet thisAlerts:
Oct 26.2008

Hi all.

I already havea javascript function that updates an image when the thumbnail is hovered over. Now I would like to add a caption to the image, so that when the thumbnail is hovered over, the relevant caption is displayed in the “caption” div below. I have four thumbnails, each with different captions.

[B]My function so far:[/B]

<script type=”text/javascript”>
function update(url,index,isSuper)
{
document[‘PhotoBig’].src=url;
}
</script>

[B]Thumbnail div:[/B]

<div id=”thumbnail”>
<a onMouseOver=”update(‘images/educational/img1-large.jpg’, 0, false); return false;”>
<img src=”images/educational/img1.jpg”>
</a>
</div>

[B]Large image div:[/B]

<div id=”large”>
<img src=”images/educational/img3-large.jpg” name=”PhotoBig”>
<div id=”caption”>WANT CAPTION TO GO HERE</div>
</div>

Any help appreciated!

Many thanks.

to post a comment
JavaScript

2 Comments(s) ↴

Copy linkTweet thisAlerts:
@ZeroKilledOct 26.2008 — <i>
</i>var img = [];
img.push('images/educational/img3-large.jpg, caption for this image');
img.push('images/educational/img2-large.jpg, caption for this image');
img.push('images/educational/img4-large.jpg, caption for this image');

function update(which){
document['PhotoBig'].src=img[which].split(', ')[0];
document.getElementById('caption').innerHTML = img[which].split(', ')[1];
}

the HTML is:
&lt;a onMouseOver="update(0);"&gt;
&lt;img src="images/educational/img1.jpg"&gt;
&lt;/a&gt;


notice that in this sample i create an array that contain a string. each entry is composed of the image url separated with a comma and a white space followed by the caption. i would prefer this approach, so you don't have to go different part of the document when you want to update which image to show. if you want to change an image position on the array, you simply move the line [b]img.push(...)[/b] to the desired position.
Copy linkTweet thisAlerts:
@th88authorNov 21.2008 — A follow up:

Works fine.

However, I can't put any commas in the caption area as it stops the text

i.e.

[INDENT]This is a, test[/INDENT]

displays:

[INDENT]This is a[/INDENT]

How can I encode commas so it doesn't assume that it's reached the end of the statement prematurely.

Thanks!
×

Success!

Help @th88 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 5.10,
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: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

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

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...