Jump to content


 


Register a free account to unlock additional features at BleepingComputer.com
Welcome to BleepingComputer, a free community where people like yourself come together to discuss and learn how to use their computers. Using the site is easy and fun. As a guest, you can browse and view the various discussions in the forums, but can not create a new topic or reply to an existing one unless you are logged in. Other benefits of registering an account are subscribing to topics and forums, creating a blog, and having no ads shown anywhere on the site.


Click here to Register a free account now! or read our Welcome Guide to learn how to use this site.

Photo

Need help with some html script


  • Please log in to reply
8 replies to this topic

#1 pcmonsters

pcmonsters

  • Members
  • 21 posts
  • OFFLINE
  •  
  • Local time:03:25 PM

Posted 11 July 2009 - 08:41 AM

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.


BC AdBot (Login to Remove)

 


m

#2 groovicus

groovicus

  • Security Colleague
  • 9,963 posts
  • OFFLINE
  •  
  • Gender:Male
  • Location:Centerville, SD
  • Local time:02:25 PM

Posted 11 July 2009 - 01:26 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

#3 pcmonsters

pcmonsters
  • Topic Starter

  • Members
  • 21 posts
  • OFFLINE
  •  
  • Local time:03:25 PM

Posted 11 July 2009 - 02:01 PM

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

#4 pcmonsters

pcmonsters
  • Topic Starter

  • Members
  • 21 posts
  • OFFLINE
  •  
  • Local time:03:25 PM

Posted 12 July 2009 - 06:04 AM

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.


#5 groovicus

groovicus

  • Security Colleague
  • 9,963 posts
  • OFFLINE
  •  
  • Gender:Male
  • Location:Centerville, SD
  • Local time:02:25 PM

Posted 12 July 2009 - 08:46 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

#6 pcmonsters

pcmonsters
  • Topic Starter

  • Members
  • 21 posts
  • OFFLINE
  •  
  • Local time:03:25 PM

Posted 12 July 2009 - 09:35 AM

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 :flowers: :thumbsup:




thanks

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


#7 groovicus

groovicus

  • Security Colleague
  • 9,963 posts
  • OFFLINE
  •  
  • Gender:Male
  • Location:Centerville, SD
  • Local time:02:25 PM

Posted 12 July 2009 - 09:48 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?

#8 pcmonsters

pcmonsters
  • Topic Starter

  • Members
  • 21 posts
  • OFFLINE
  •  
  • Local time:03:25 PM

Posted 12 July 2009 - 09:55 AM

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.


#9 KamakaZ

KamakaZ

  • Members
  • 739 posts
  • OFFLINE
  •  
  • Gender:Male
  • Location:Victoria
  • Local time:07:25 AM

Posted 12 July 2009 - 06:37 PM

i own you big time


hehehe he own you big time groovicus...

There's no place like 127.0.0.1
There are 10 types of people in the world, those that can read binary, and those who can't.





0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users