Want to add text under mouseover image

[misscosmic]

I have a kinda slideshow where a thumbnail triggers a larger image to show up on mouse over. I would like to have text under this larger image but I don't seem able to. Help very much appreciated

<div class="items">



<div class="item">

<a href="

http://www.lortie.asso.fr/"

target="blank" title="L’association L'Ortie"><img src="images_general/images_webdesign/lortie_small.jpg" id="pic1" onMouseover="ShowLarge('images_general/images_webdesign/lortie_big.jpg'); "/> </a> </div>


<div class="item">
<a href="

http://shamanism.comli.com/"

target="blank" title="shamanism"><img src="images_general/images_webdesign/shamanic_small.jpg" id="pic2" onMouseover="ShowLarge('images_general/images_webdesign/shamanic_big.jpg');"/></a> </div>

<script>
// execute your scripts when DOM is ready. this is a good habit
$(function() {

// initialize scrollable with mousewheel support
$(".scrollable").scrollable({ vertical: true, mousewheel: true });

});

function ShowLarge(name)
{
// This script swaps the pics on the right side
document.getElementById("pic3").src = name;
}
</script>

 

[vacunita]

Show us the code you are using.

And your images don't work. They should be complete fully qualified addresses, rather than relative.

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech

 

[misscosmic]

Here some code of the website. As you see I already use some javascript which runs a mouse-over-thumbs-slideshow. This is also why for me as non-programmer I find it difficult to add a javascript which adds text to the mousover images..

<div class="scrollable vertical">
						<div class="items">
												
								

							<div class="item">

									<a href="[URL unfurl="true"]http://www.lortie.asso.fr/"[/URL] target="blank" title="L’association L'Ortie"><img src="images_general/images_webdesign/lortie_small.jpg"  id="pic1"  onMouseover="ShowLarge('images_general/images_webdesign/lortie_big.jpg');  "/>			  </a>	</div>
							
							
								<div class="item">
									<a href="[URL unfurl="true"]http://shamanism.comli.com/"[/URL] target="blank" title="shamanism"><img src="images_general/images_webdesign/shamanic_small.jpg" id="pic2" onMouseover="ShowLarge('images_general/images_webdesign/shamanic_big.jpg');"/></a>						 	</div>

- - - - - - - -

<script>
// execute your scripts when DOM is ready. this is a good habit
$(function() {		
		
	// initialize scrollable with mousewheel support
	$(".scrollable").scrollable({ vertical: true, mousewheel: true });	
	
});

function ShowLarge(name)
{
// This script swaps the pics on the right side
document.getElementById("pic3").src = name;
}
</script>

 

[vacunita]

You can add the text to display as an extra parameter to your ShowLarge function, and then simply replace the innerHTML of some element under the image to show it.

You neglected to post the HTML code for the large image so I'm going to assume a structure similar to the following:

[b][COLOR=#0000FF]<div[/color][/b] [COLOR=#009900]class[/color][COLOR=#990000]=[/color][COLOR=#FF0000]"largerImagePlace"[/color][b][COLOR=#0000FF]>[/color][/b]
[b][COLOR=#0000FF]<img[/color][/b] [COLOR=#009900]id[/color][COLOR=#990000]=[/color][COLOR=#FF0000]"pic3"[/color] [COLOR=#009900]src[/color][COLOR=#990000]=[/color][COLOR=#FF0000]"default.jpg"[/color][b][COLOR=#0000FF]>[/color][/b]
[b][COLOR=#0000FF]<div[/color][/b] [COLOR=#009900]id[/color][COLOR=#990000]=[/color][COLOR=#FF0000]"textforpic"[/color][b][COLOR=#0000FF]>[/color][/b]Default Text here[b][COLOR=#0000FF]</div>[/color][/b]
[b][COLOR=#0000FF]</div>[/color][/b]

function ShowLarge(name,textforimage)
{
// This script swaps the pics on the right side
document.getElementById("pic3").src = name;
// This changes the text fo an element below the image
document.getElementById('textforpic').innerHTML = textforimage;
}

[b][COLOR=#0000FF]<a[/color][/b] [COLOR=#009900]href[/color][COLOR=#990000]=[/color][COLOR=#FF0000]"[URL unfurl="true"]http://www.lortie.asso.fr/"[/URL][/color] [COLOR=#009900]target[/color][COLOR=#990000]=[/color][COLOR=#FF0000]"blank"[/color] [COLOR=#009900]title[/color][COLOR=#990000]=[/color][COLOR=#FF0000]"L’association L'Ortie"[/color][b][COLOR=#0000FF]>
<img[/color][/b] [COLOR=#009900]src[/color][COLOR=#990000]=[/color][COLOR=#FF0000]"images_general/images_webdesign/lortie_small.jpg"[/color]  [COLOR=#009900]id[/color][COLOR=#990000]=[/color][COLOR=#FF0000]"pic1"[/color] 
 [COLOR=#009900]onMouseover[/color][COLOR=#990000]=[/color][COLOR=#FF0000]"ShowLarge('images_general/images_webdesign/lortie_big.jpg', '[/color][COLOR=#009900]This[/color] [COLOR=#009900]text[/color] [COLOR=#009900]will[/color] [COLOR=#009900]show[/color] [COLOR=#009900]under[/color] [COLOR=#009900]image[/color][COLOR=#FF0000]");  '[/color][b][COLOR=#0000FF]/>[/color][/b] [b][COLOR=#0000FF]</a>[/color][/b]

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech

 

[misscosmic]

Thanks vacunita!! it is working like a charm. Thanks for your speed of light solution. Peace to you, peace to all!

 

[vacunita]

Glad I could help.

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech