Thumbnail Viewer II - how do I change font size of text on mouseover?
Script: Dynamic Drive DHTML Scripts- Image Thumbnail Viewer II
http://www.dynamicdrive.com/dynamici...thumbnail2.htm
I hope I have referenced the above correctly!
Greetings - am new to this forum and javascript and wonder if someone could advise how I can change the font size of the text that appears on the right side once the mouseover on the left hand side has been activated. This font is much larger and for the life of me, I cannot figure out how to have a uniform font. Many thanks for your advice.
What I have is as follows:
[<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>fengshui</title>
<script type="text/javascript">
/***********************************************
* Image Thumbnail Viewer II script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Visit http://www.dynamicDrive.com for hundreds of DHTML scripts
* This notice must stay intact for legal use
* Modified here to accept external text file as well as images
* Modified for optional captions, read all comments in top
* of script and in HTML code below.
* Modifications © John Davenport Scheuer - jscheuer1TAKETHISOUTTOUSEEMAIL@comcast.net
***********************************************/
/*
Specify image/text file paths and optional link (set link to "" for no link)
set third parameter to "i" for image file, "t" for text file: */
var dynimages=new Array()
dynimages[0]=["images/fengsh1.jpg", "", "t"]
dynimages[1]=["images/fengsh2.jpg", "", "t"]
dynimages[2]=["images/fengsh3.jpg", "", "t"]
dynimages[3]=["images/fengsh4.jpg", "", "t"]
//Set scrolling for text content if text content used("yes" or "no"):
var scrolltext="no"
//Preload images ("yes" or "no"):
var preloadimg="yes"
//Set optional link target to be added to all images with a link:
var optlinktarget=""
//Set image border width
var imgborderwidth=0
//Optionally, change 1.0 and 0.7 below to affect Wipe gradient size and duration in seconds in IE5.5+:
var filterstring="progidXImageTransform.Microsoft.GradientWipe(GradientSize=1.0 Duration=0.7)"
///////No need to edit beyond here/////
if (preloadimg=="yes"){
for (x=0; x<dynimages.length; x++){
if (dynimages[x][2]=='i'){
var myimage=new Image()
myimage.src=dynimages[x][0]
}
}
}
function returnimgcode(theimg){
var imghtml=""
if (theimg[1]!="")
imghtml='<a href="'+theimg[1]+'" target="'+optlinktarget+'">'
imghtml+='<img src="'+theimg[0]+'" border="'+imgborderwidth+'">'
if (theimg[1]!="")
imghtml+='</a>'
return imghtml
}
function modifyimage(loadarea, imgindex){
if (document.getElementById){
var imgobj=document.getElementById(loadarea)
if (imgobj.filters && window.createPopup){
imgobj.style.filter=filterstring
imgobj.filters[0].Apply()
}
imgobj.innerHTML=returnimgcode(dynimages[imgindex])
if (imgobj.filters && window.createPopup)
imgobj.filters[0].Play()
return false
}
}
function get_cap(cap){
if (document.getElementById){
document.getElementById('caploadarea').innerHTML=cap;}
else if (document.all){
document.all('caploadarea').innerHTML=cap;}
else{
return;}
}
</script>
<style type="text/css">
body {font-family: helvetica; font-size: 8pt}
.caption2 { font-size: 10pt; background-color: green; color: #FFFFFF; font-weight: bold }
</style>
</head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<p>
<table border="1" cellspacing="0" cellpadding="0" width="495" style="border-collapse: collapse; mso-border-alt: outset #111111 2.25pt; mso-padding-alt: 2.25pt 2.25pt 2.25pt 2.25pt; border-style: none; border-width: medium" height="352">
<tr>
<td colspan="2" valign="top" style="background-color: green; background-repeat: repeat; background-attachment: scroll; border: .75pt inset #111111; padding: 2.25pt; background-position: 0% 50%" width="489" height="32">
<p class="MsoNormal" style="mso-margin-top-alt:auto;mso-margin-bottom-alt:auto;
line-height:150%" align="left"><span style="font-size: 8.0pt; font-family: Arial; color: white">The
Five Elements </span><span style="font-size:8.0pt;mso-bidi-font-size:9.0pt;
font-family:Arial;mso-fareast-font-family:"Arial Unicode MS";mso-bidi-font-family:
"Arial Unicode MS";color:white"></o>
</span></p>
</td>
</tr>
<tr>
<td valign="top" style="mso-border-top-alt: inset #111111 .75pt; border-left: .75pt inset #111111; border-right: .75pt inset #111111; border-top-style: none; border-top-width: medium; border-bottom: .75pt inset #111111; padding: 2.25pt" width="228" height="316">
<p style="line-height: 100%; word-spacing: 0; margin: 0" align="center"><img border="0" src="images/pentagram.jpg" width="88" height="87"></p>
<p style="line-height: 100%; word-spacing: 0; margin: 0" align="center"><font face="Arial" size="1"><font color="#000000">Yin
(moon) and Yang (sun) represent
the two primal cosmic forces in the
universe. Yin is the receptive, passive, cold female force.
Yang is masculine force, movement, heat. The Yin Yang symbol represents
the idealised balance of the forces; equilibrium
in the universe.</font><font face="Arial, geneva, helvetica" size="-1" color="#000000"><br>
</font>As an expression of the number five and in its dynamic aspect, the pentagram
is a representation of the five elemental activities of Chinese
philosophy
<p style="line-height: 100%; word-spacing: 0; margin: 0" align="center">Earth,
Metal, Water, Wood and Fire. </font></p>
<font color="#0000FF" size="1">
</font>
<a name="<p> </p><B>The Productive Cycle </B><br />
Wood feeds Fire, Fire feeds earth, Earth feeds metal, Metal feeds
water, and Water feeds wood." onMouseover="modifyimage('dynloadarea', 0);get_cap(this.name);">
<font color="#0000FF" size="1">
The productive cycle</font></a><font size="1" color="#0000FF">
<br>
<a name="<p> </p><B>The Controlling Cycle </B><br />
Wood controls metal, Metal controls fire, Fire controls water, Water
controls earth, Earth controls wood." onMouseover="modifyimage('dynloadarea', 1);get_cap(this.name);">The
controlling cycle</a><br>
<a name="<p> </p><B>The Dissolving Cycle </B><br />
Wood dissolves water, Water dissolves metal, Metal dissolves earth,
Earth dissolves fire, and Fire dissolves wood." onMouseover="modifyimage('dynloadarea', 2);get_cap(this.name);">The
dissolving cycle</a><br>
<a name="<p> </p><B>The Destructive Cycle </B><br />
Metal destroys Wood, Wood destroys earth, Earth destroys water, Water
destroys fire, and Fire destroys metal." onMouseover="modifyimage('dynloadarea', 3);get_cap(this.name);">The
destructive cycle</a>
</font>
</td>
<td valign="top" style="mso-border-top-alt: inset #111111 .75pt; mso-border-left-alt: inset #111111 .75pt; border-left-style: none; border-left-width: medium; border-right: .75pt inset #111111; border-top-style: none; border-top-width: medium; border-bottom: .75pt inset #111111; padding: 2.25pt" width="254" height="316">
<p class="MsoNormal" style="line-height: 100%; word-spacing: 0; margin: 0" align="center"><font face="Arial"> </font></p>
<div id="caploadarea2" style="width: 253; height: 260; text-align: center">
<div id="caploadarea" style="width: 225; height: 34; text-align: center">
<p class="MsoNormal" style="line-height: 100%; word-spacing: 0; margin: 0" align="center"><font face="Arial" size="1"> </font>
</div>
<div id="dynloadarea" style="width: 253; height: 164">
<div class="caption2">
<p align="center" class="caption2">
For further explanations, please address your queries to <font color="#FFFF00">Xochitl</font>
</div>
</div>
</div>
</td>
</tr>
</table>
<p>
</p>
<p class="MsoNormal"> <o
</o
</p>
</noscript>
</body>
</html>
Any help would be hugely appreciated! Thanks!
CSS Codes
Reply With Quote
Bookmarks