PDA

View Full Version : a image point to document text sizer script combine



paldo
08-12-2012, 01:02 PM
1) Script Title: document text sizer

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex9/textsizer.htm

3) Describe problem:

Instead of having a link (+ Larger Font | + Smaller Font) that put into action the javascript I would like it to be a image. I opened my image with DW fireworks and put a hotspot over the image. In the fireworks properties inspector I have to add the URL, which is <a href="javascript:ts('body',1)">
I export the hotspot and I get:

<img name="format_font_size_more" src="format_font_size_more.png" width="36" height="36" border="0" id="format_font_size_more" usemap="#m_format_font_size_more" alt="" /><map name="m_format_font_size_more" id="m_format_font_size_more">
<area shape="poly" coords="2,2,34,2,34,34,2,34,2,2" href="<a href="javascript:ts('body',1)">
</map>
Unfortunately it doesn't work.
Any suggestion? I appreciate.

vwphillips
08-12-2012, 01:17 PM
<img name="format_font_size_more" src="format_font_size_more.png" width="36" height="36" border="1" id="format_font_size_more" usemap="#m_format_font_size_more" alt="" /><map name="m_format_font_size_more" id="m_format_font_size_more">
<area shape="poly" coords="2,2,34,2,34,34,2,34,2,2" onmouseup="ts('body',1)">
</map>

paldo
08-12-2012, 02:22 PM
As your suggestion did not work I looked for other solutions and came up to this:


<a href="javascript:ts('body',1)">
<img border="1" src="../images/format_font_size_more.png" alt="bigger font size" width="32" height="32" />
</a>

But the first time I have to click two times to put the script into action; why?

vwphillips
08-12-2012, 02:47 PM
the code I posted worked for me


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title></title>
<script type="text/javascript" >

/***********************************************
* Document Text Sizer- Copyright 2003 - Taewook Kang. All rights reserved.
* Coded by: Taewook Kang (http://www.txkang.com)
* This notice must stay intact for use
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/

/*------------------------------------------------------------
Document Text Sizer- Copyright 2003 - Taewook Kang. All rights reserved.
Coded by: Taewook Kang (txkang.REMOVETHIS@hotmail.com)
Web Site: http://txkang.com
Script featured on Dynamic Drive (http://www.dynamicdrive.com)

Please retain this copyright notice in the script.
License is granted to user to reuse this code on
their own website if, and only if,
this entire copyright notice is included.
--------------------------------------------------------------*/

//Specify affected tags. Add or remove from list:
var tgs = new Array( 'div','td','tr');

//Specify spectrum of different font sizes:
var szs = new Array( 'xx-small','x-small','small','medium','large','x-large','xx-large' );
var startSz = 2;

function ts( trgt,inc ) {
if (!document.getElementById) return
var d = document,cEl = null,sz = startSz,i,j,cTags;

sz += inc;
if ( sz < 0 ) sz = 0;
if ( sz > 6 ) sz = 6;
startSz = sz;

if ( !( cEl = d.getElementById( trgt ) ) ) cEl = d.getElementsByTagName( trgt )[ 0 ];

cEl.style.fontSize = szs[ sz ];

for ( i = 0 ; i < tgs.length ; i++ ) {
cTags = cEl.getElementsByTagName( tgs[ i ] );
for ( j = 0 ; j < cTags.length ; j++ ) cTags[ j ].style.fontSize = szs[ sz ];
}
}</script></head>

<body>

TEXT
<img name="format_font_size_more" src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" width="36" height="36" border="1" id="format_font_size_more" usemap="#m_format_font_size_more" alt="" />

<map name="m_format_font_size_more" id="m_format_font_size_more">
<area shape="poly" coords="2,2,34,2,34,34,2,34,2,2" onmouseup="ts('body',1)">
</map>

</body>

</html>

as does



<a href="javascript:ts('body',1)">
<img border="1" src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" alt="bigger font size" width="32" height="32" />
</a>


and



<img border="1" src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" alt="bigger font size" width="32" height="32" onmouseup="ts('body',1)" />

paldo
08-12-2012, 09:12 PM
Thank you. I have tried all three suggestions and I have encountered the same problem: I have to click two time on the image in order to increase the font size. I thought maybe is because of my browsers setting (standard font size 16) but it's not.
I change <a href="javascript:ts('body',1)"> to <a href="javascript:ts('body',2)"> and it works. I have to test on IE as I'm using Safari ,opera and camino on a Mac.
Can you explain me why this behavior?

Thank you

vwphillips
08-13-2012, 10:32 AM
var szs = new Array( 'xx-small','x-small','small','medium','large','x-large','xx-large' );
var startSz = 0;


variable szs defines the font size range in an array
variable startSz defines the initial font size

you can customise these variables to achieve the desired effect

e.g.


var szs = new Array( '10px','12px','14px','18px','20px','22px','24px' );
var startSz = 2;