Need help with some html script

hi

i have a html script voor picture thumbnails

but what i want is that when i want to hover on one of the thumbnails i want to see a name to be displayed under the thumbnails

if soemone can help me out with this, i know i have to add some to the html script but what?.

this is the javascript.

<!-- === Begin Frame === --> 
<table class="mainframe" style="width: 100%;" cellspacing="0"> 
<tr> 
<td class="mf_tl"></td> 
<td class="mf_tm"></td> 
<td class="mf_tr"></td> 
</tr> 
<tr> 
<td class="mf_ml"></td> 
<td class="mf_content" style="text-align: left; padding: 0px;"> 
<h1></h1>&lt;script type="text/javascript"> 
function showpic(tt_pic,tt_text) {
document.picbox.src = tt_pic;
document.getElementById('txtbox').innerHTML = tt_text;
}
</script> 
<style type="text/css"> 
<!--
a:link .tenpic, a:visited .tenpic { width: 79px; height: 92px; padding: 0px; border: 1px solid silver; margin: 2px; background-color: black; }
--> 
</style> 
<div style="width: 320px; height: 150px; position: static;"> 
<div style="width: 250px; float: left;"> 
<a href="http://blogs.nyunews.com/wp-content/uploads/2007/10/southpark.jpg" onmouseover="showpic('http://blogs.nyunews.com/wp-content/uploads/2007/10/southpark.jpg');"><img src="http://blogs.nyunews.com/wp-content/uploads/2007/10/southpark.jpg" class="tenpic" title="southpark"
/></a><a href="http://www.poster.net/south-park/south-park-all-characters-white-background-3700200.jpg" onmouseover="showpic('http://www.poster.net/south-park/south-park-all-characters-white-background-3700200.jpg');"><img src="http://www.poster.net/south-park/south-park-all-characters-white-background-3700200.jpg" class="tenpic" title="southpark1"
/></a><a href="http://blogs.nyunews.com/wp-content/uploads/2007/10/southpark.jpg" onmouseover="showpic('http://blogs.nyunews.com/wp-content/uploads/2007/10/southpark.jpg');"><img src="http://blogs.nyunews.com/wp-content/uploads/2007/10/southpark.jpg" class="tenpic" title="southpark"
/></a><a href="http://www.poster.net/south-park/south-park-all-characters-white-background-3700200.jpg" onmouseover="showpic('http://www.poster.net/south-park/south-park-all-characters-white-background-3700200.jpg');"><img src="http://www.poster.net/south-park/south-park-all-characters-white-background-3700200.jpg" class="tenpic" title="southpark1"
/></a><a href="http://blogs.nyunews.com/wp-content/uploads/2007/10/southpark.jpg" onmouseover="showpic('http://blogs.nyunews.com/wp-content/uploads/2007/10/southpark.jpg');"><img src="http://blogs.nyunews.com/wp-content/uploads/2007/10/southpark.jpg" class="tenpic" title="southpark"
/></a><a href="http://www.poster.net/south-park/south-park-all-characters-white-background-3700200.jpg" onmouseover="showpic('http://www.poster.net/south-park/south-park-all-characters-white-background-3700200.jpg');"><img src="http://www.poster.net/south-park/south-park-all-characters-white-background-3700200.jpg" class="tenpic" title="southpark1"
/></a><a href="http://www.blogs.nyunews.com/wp-content/uploads/2007/10/southpark.jpg" onmouseover="showpic('http://blogs.nyunews.com/wp-content/uploads/2007/10/southpark.jpg');"><img src="http://blogs.nyunews.com/wp-content/uploads/2007/10/southpark.jpg" class="tenpic" title="southpark"
/></a></div><img name="picbox" style="width: 150px; height: 300px; border: 1px solid silver; position: absolute; right: 8px; top: 9px;" src="http://blogs.nyunews.com/wp-content/uploads/2007/10/southpark.jpg">
<td class="mf_mr"></td> 
</tr> 
<tr> 
<td class="mf_bl"></td> 
<td class="mf_bm"></td> 
<td class="mf_br"></td> 
</tr> 
</table> 
<!-- === End Frame === -->

and this is what i want just take alook at this picture
http://img7.imageshack.us/img7/451/wwwwhxc.jpg

and one more thing what i want is can you choose a nother font for it

i hope soemone can help me out

thanks

Edited by groovicus, 11 July 2009 - 01:21 PM.

There are a couple ways you can do that. One is with an onHover javascript function. Another way is with a tooltip. It sort of depends on your level of experience. Generating a tooltip is pretty easy, but placing it at a custom location is a bit harder. Here are some examples that may help get you started:
http://www.dhtmlgoodies.com/index.html?page=tooltip
http://hscripts.com/tutorials/html/tooltip.php
http://developer.yahoo.com/yui/container/tooltip/index.html

hi groovicus

and thanks for the fast response

its someting like that what i want the tool tip
but i want to get a scrip that can be intergraded in the java script that i have showing in my first post
so that i hover on a thumnail that a text is showing

anyway thanks for the help

oke

one more thing how do i chage the font of the text and also the color in this javascript


thanks

Edited by pcmonsters, 12 July 2009 - 07:48 AM.

You can just apply a different style to it. Something like:
document.getElementtById("objectID").style.font="Times";

Or, you can assign a different class to the element:
document.getElementtById("objectID").className="myClass";

Javascript Style attributes

hi groovicus

thanks for the help you just saved me alot of time to figure this out

many many thanks the fast responses this is sure 1 of the best forums out there

thanks alot




thanks

Edited by pcmonsters, 12 July 2009 - 09:47 AM.

http://jmvidal.cse.sc.edu/talks/javascript...riptinhtml.html

Your code up above is not just javascript. It includes HTML and CSS. There are tons of tutorials that show how to include javascript, how to use javascript, etc. Take some time to read them and practice the examples so that you get a feel for what you are doing. I am going to learn how to do some things using Silverlight; maybe we can share what we learned?

hi

yes sure sharing things to help each other is the best thing you can do on this kind of forums

i own you ,with out the help of you i was probably still searching for a answer till tomorow

but anyway thanks for the help


thanks

Edited by pcmonsters, 12 July 2009 - 07:25 PM.

i own you big time

hehehe he own you big time groovicus...