• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 827
  • Last Modified:

JavaScript onmouseover slideshow

Hi all,

At http://www.javascriptkit.com/script/script2/rolldifferent.shtml the is a Javascript onmouseover slideshow.

How can I go about adding a piece of text to each image??

Or can someone point me to a better example of this. Basically I want it displayed almost how it is at javascriptkit.

On the left I have the different options that link off to seperate pages. Then upon the rollover of the link it displays a picture and a bit of text relevant to that link.

Currently the example shows how to swap out the images, but how can this be modified to include say a paragraph of text for each link.

Thank you for any help.

Jeremy.
0
GhostWerx
Asked:
GhostWerx
  • 4
  • 3
4 Solutions
 
GhostWerxAuthor Commented:
Hi all,

I sort of found what I want.

http://www.stunicholls.com/gallery/simply_more.html

However, it requires you to click on the links. I basically want whats available at the above link but done automatically upon rollover of the link.

Any help would be appreciated.

Jeremy.
0
 
quincydudeCommented:
From this example
http://www.javascriptkit.com/script/script2/rolldifferent.shtml

first add this line below the image position
<span id="picdesc"></span>

and modify the changeimage function to below attached code

and finally call the changeimage() including the description

<a href="b2.htm" onMouseover="changeimage(myimages[0],this.href,'This is a b2!')">Plane 1</a>


function changeimage(towhat,url,desc){
if (document.images){
document.images.targetimage.src=towhat.src
gotolink=url
document.getElementById("picdesc").innerHTML=desc;
}
}

Open in new window

0
 
quincydudeCommented:
if you want the 2nd example u have given
just simply open the switch_toggle.js
and change line 16

e.onclick = function () {

to

e.onmouseover = function () {
0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
GhostWerxAuthor Commented:
Hi quincydude,

Thanks so much.

I have already started to implement the first example.

You mentioned to call the function as such

onMouseover="changeimage(myimages[0],this.href,'This is a b2!')"

In where its got 'This is a b2!'

Can I have something like '<p><strong>B2</strong><br />This is a B2 bla bla bla ....</p>'

And as I am having two links for the same rollover could I create an array with the pictures and associated text and have it spat out that way I don't have to have duplicate code on the site??

Thanks for your help so far anyways.

GW.
0
 
quincydudeCommented:
Hi GW,

Since we are using .innerHTML to change the content, you are ok to put html codes into the description.

You can sure make your own array to store the description as the images does,as I am just try to put it simple, but the  choice is all up to you :)
0
 
quincydudeCommented:
BTW I might suggest you to use

<div id="picdesc"></div>

instead of

<span id="picdesc"></span>

since you want to input more formatted content into your photo description
0
 
GhostWerxAuthor Commented:
Thanks heaps. Got it working!
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 4
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now