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:

HTML Code:

<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

Code:

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

HTML Code:

<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

Code:

<!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

Code:

<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

Code:

<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

Code:

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.

Code:

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

Thread: a image point to document text sizer script combine

Thread Tools

Search Thread

a image point to document text sizer script combine

Bookmarks

Bookmarks

Posting Permissions