NetWeather, el tiempo en tu pagina web o blog.

Servicio meteorologico en tu web.

Hace poco me topé con netWeather, uno de esos servicios que sirven para mostrar cómo está el Tiempo en dónde vives. En varias ocasiones he probado servicios similares, pero no me convencían porque no mostraban como estaba la cosas exactamente donde yo vivo, solo estaban disponibles las capitales de los países o por provincias.
En cambio, esta herramienta provee de un widget para que puedas mostrar el Tiempo en tu blog. Si querés hacerlo, fijate si tenés suerte y encontrás tu ciudad. Para instalar el widget, hacé lo siguiente:

1. Clic en "Get my NetWeather".
2. Seleccionar unidad de medición (en Argentina usamos ºC), lenguaje (3 nomás...), Nombre de ciudad o código postal (cualquiera de las dos que elijas, haz clic en "Search" y te dará opciones de lugares disponibles). Clic en "Next".
3. Seleccionar tamaño del widget (a mayor tamaño más información, con mapas y todo), categoría de diseño (colores, amor o estaciones del año) y theme. Clic en "Next".
4. Aparecen términos y condiciones, hacer clic en "I agree..." y luego copiar el código html (2 opciones: web o myspace).
5. Pegar lo que has copiado en el código html de tu web. Acá en Blogger se puede copiar directamente en los post o en las barras laterales por medio de las opciones de diseño.

Weather Forecast | Weather Maps | Weather Radar

Fuentes pixeladas para tu web.

Generador de fuentes pixeladas.

En esta ocasión, quiero hablar de las fuentes pixeladas y un servicio en internet que resulta muy útil para usarlas desde incursiones amateurs en el diseño web hasta los trabajos pro.

Las fuentes pixeladas son fuentes tipográficas digitales que usan menos cantidad de pixeles que una fuente "true type" normal, es decir, no son indicadas para imprimir en papel, sino para verse en pantalla. De alguna manera las fuentes pixeladas recuerdan a las letras que podrías encontrar en ordenadores y sistemas operativos antiguos, como el MS-DOS. Pero hoy en día, muchos de los botones 2.0 que ves en la web como los contadores de Feedburner, los botones de directorios de blogs y hasta los "faves" de Technorati utilizan estas fuentes acompañadas de pequeñas imágenes o iconos que al final resultan muy livianos y si no tienen muchos colores, generalmente no pasan de 1KB.
Si tenés ganas de generar botones con auténticas fuentes pixeladas, no tenés que buscar mucho. Recientemente encontré por la web la página de Semplice Pixelfonts que ofrece una buena variedad de fuentes distintas, pero con una ventaja: también son true type, es decir, se pueden imprimir, si alguna vez necesitás hacerlo. Una buena oportunidad de generar botones livianos, si las añadís a las posibilidades de editores gráficos como Photoshop, Gimp, o incluso el básico Paint.

Herramientas online para CSS.

10 útiles aplicaciones online para trabajar con CSS.


1. Primer CSS
http://primercss.com/
Intriduces una URL este sitio obtiene las clases e IDs, y crea una hoja de estilos CSS .

2. Automatic CSS inliner
http://www.mailchimp.com/labs/inlinecss.php
Transforma estilos locales en .CSS. Buena herramienta para editar las newsletteres en campañas de email marketing.

3. CSS sprites generator
http://css-sprit.es/
Generador de sprites CSS online desde la web.

4. Moo color finder
http://www.artviper.net/colorfinder.php
Obtienes los colores de un documento .css y exporta la paleta de colores a photoshop.

5. MinifyMe
http://code.google.com/p/minifyme
Ccombina, optimiza y reduce el tamaño de archivos CSS.

6. Variable Grid System
http://www.spry-soft.com/grids
Utiliza una rejilla en tus hojas de estilo CSS.

7. Modernizr
http://www.modernizr.com/
Checkea si tu navegador tiene soporto para las nuevas características de CSS.

8. List-o-matic
http://www.accessify.com/tools-and-wizards/developer-tools/list-o-matic
Para crear menús horizontales o verticales de forma muy sencilla y exportarlos como hojas de estilo CSS.

9. CSS text wrapper
http://www.csstextwrap.com/
Para formatear párrafos de texto yhacer que el texto fluya creando formas.

10. Dust-me selectors
http://www.sitepoint.com/dustmeselectors/
Una extensión para Firefox que nos avisa cuando algún elemento de la hoja CSS es huérfano.

Codigos para efectos de ratón y cursor.

Trucos de efectos para el mouse y cursor.

Tenemos aqui algunos trucos y códigos javascript recopilados, que creemos que te pueden ser útiles para realizar cualquier página; basicamente son efectos que actuan sobre el funcionamiento del mouse o en el cursor de tu pagina web.

Estrella persiguiendo al puntero.
<!-- Dentro del Tag HEAD --><br /> <br /> <STYLE TYPE="text/css"> <!-- BODY{ overflow:scroll; overflow-x:hidden; } .s1 { position : absolute; font-size : 10pt; color : blue; visibility: hidden; } .s2 { position : absolute; font-size : 18pt; color : red; visibility : hidden; } .s3 { position : absolute; font-size : 14pt; color : gold; visibility : hidden; } .s4 { position : absolute; font-size : 12pt; color : lime; visibility : hidden; } //--> </STYLE><br /> <br /> <br /> <!-- Dentro del Tag BODY --><br /> <br /> <DIV ID="div1" CLASS="s1">*</DIV><DIV ID="div2" CLASS="s2">*</DIV><DIV ID="div3" CLASS="s3">*</DIV><DIV ID="div4" CLASS="s4">*</DIV><br /> <br /> <SCRIPT LANGUAGE="javascript" TYPE="text/javascript"> // adaptado por http://www.bibliotutos.blogspot.com var nav = (document.layers); var tmr = null; var spd = 50; var x = 0; var x_offset = 5; var y = 0; var y_offset = 15; if(nav) document.captureEvents(Event.MOUSEMOVE); document.onmousemove = get_mouse; function get_mouse(e) { x = (nav) ? e.pageX : event.clientX+document.body.scrollLeft; y = (nav) ? e.pageY : event.clientY+document.body.scrollTop; x += x_offset; y += y_offset; beam(1); } function beam(n) { if(n<5) { if(nav) { eval("document.div"+n+".top="+y); eval("document.div"+n+".left="+x); eval("document.div"+n+".visibility='visible'"); } else { eval("div"+n+".style.top="+y); eval("div"+n+".style.left="+x); eval("div"+n+".style.visibility='visible'"); } n++; tmr=setTimeout("beam("+n+")",spd); } else { clearTimeout(tmr); fade(4); } } function fade(n) { if(n>0) { if(nav)eval("document.div"+n+".visibility='hidden'"); else eval("div"+n+".style.visibility='hidden'"); n--; tmr=setTimeout("fade("+n+")",spd); } else clearTimeout(tmr); } // --> </SCRIPT><br />

Conjunto de estrellas persiguiendo al cursor.
<LAYER NAME="a0" LEFT=10 TOP=10 VISIBILITY=SHOW BGCOLOR="#ffffff" CLIP="0,0,1,1"></LAYER><br /> <LAYER NAME="a1" LEFT=10 TOP=10 VISIBILITY=SHOW BGCOLOR="#fff000" CLIP="0,0,1,1"></LAYER><br /> <LAYER NAME="a2" LEFT=10 TOP=10 VISIBILITY=SHOW BGCOLOR="#ffa000" CLIP="0,0,1,1"></LAYER><br /> <LAYER NAME="a3" LEFT=10 TOP=10 VISIBILITY=SHOW BGCOLOR="#ff00ff" CLIP="0,0,1,1"></LAYER><br /> <LAYER NAME="a4" LEFT=10 TOP=10 VISIBILITY=SHOW BGCOLOR="#00ff00" CLIP="0,0,1,1"></LAYER><br /> <LAYER NAME="a5" LEFT=10 TOP=10 VISIBILITY=SHOW BGCOLOR="#FF00FF" CLIP="0,0,1,1"></LAYER><br /> <LAYER NAME="a6" LEFT=10 TOP=10 VISIBILITY=SHOW BGCOLOR="#FF0000" CLIP="0,0,1,1"></LAYER><br /> <LAYER NAME="a7" LEFT=10 TOP=10 VISIBILITY=SHOW BGCOLOR="#ffffff" CLIP="0,0,2,2"></LAYER><br /> <LAYER NAME="a8" LEFT=10 TOP=10 VISIBILITY=SHOW BGCOLOR="#fff000" CLIP="0,0,2,2"></LAYER><br /> <LAYER NAME="a9" LEFT=10 TOP=10 VISIBILITY=SHOW BGCOLOR="#ffa000" CLIP="0,0,2,2"></LAYER><br /> <LAYER NAME="a10" LEFT=10 TOP=10 VISIBILITY=SHOW BGCOLOR="#ff00ff" CLIP="0,0,2,2"></LAYER><br /> <LAYER NAME="a11" LEFT=10 TOP=10 VISIBILITY=SHOW BGCOLOR="#00ff00" CLIP="0,0,2,2"></LAYER><br /> <LAYER NAME="a12" LEFT=10 TOP=10 VISIBILITY=SHOW BGCOLOR="#0000ff" CLIP="0,0,2,2"></LAYER><br /> <LAYER NAME="a13" LEFT=10 TOP=10 VISIBILITY=SHOW BGCOLOR="#FF0000" CLIP="0,0,3,3"></LAYER><br /> <br /> <br /> <script language="JavaScript"> /* Magic Wand cursor (By Kurt at kurt.grigg@virgin.net) Modified and permission granted to Dynamic Drive to feature script in archive For full source, usage terms, and 100's more DHTML scripts, visit http://dynamicdrive.com */ if (document.all){ with (document){ write('<div id="starsDiv" style="position:absolute;top:0px;left:0px">') write('<div style="position:relative;width:1px;height:1px;background:#ffffff;font-size:1px;visibility:visible"></div>') write('<div style="position:relative;width:1px;height:1px;background:#fff000;font-size:1px;visibility:visible"></div>') write('<div style="position:relative;width:1px;height:1px;background:#ffa000;font-size:1px;visibility:visible"></div>') write('<div style="position:relative;width:1px;height:1px;background:#ff00ff;font-size:1px;visibility:visible"></div>') write('<div style="position:relative;width:1px;height:1px;background:#00ff00;font-size:1px;visibility:visible"></div>') write('<div style="position:relative;width:1px;height:1px;background:#0000ff;font-size:1px;visibility:visible"></div>') write('<div style="position:relative;width:1px;height:1px;background:#FF0000;font-size:1px;visibility:visible"></div>') write('<div style="position:relative;width:2px;height:2px;background:#ffffff;font-size:2px;visibility:visible"></div>') write('<div style="position:relative;width:2px;height:2px;background:#fff000;font-size:2px;visibility:visible"></div>') write('<div style="position:relative;width:2px;height:2px;background:#ffa000;font-size:2px;visibility:visible"></div>') write('<div style="position:relative;width:2px;height:2px;background:#ff00ff;font-size:2px;visibility:visible"></div>') write('<div style="position:relative;width:2px;height:2px;background:#00ff00;font-size:2px;visibility:visible"></div>') write('<div style="position:relative;width:2px;height:2px;background:#0000ff;font-size:2px;visibility:visible"></div>') write('<div style="position:relative;width:3px;height:3px;background:#FF0000;font-size:3px;visibility:visible"></div>') write('</div>') } } var Clrs=new Array(6) Clrs[0]='ff0000'; Clrs[1]='00ff00'; Clrs[2]='000aff'; Clrs[3]='ff00ff'; Clrs[4]='fff000'; Clrs[5]='fffff0'; if (document.layers) {window.captureEvents(Event.MOUSEMOVE);} var yBase = 200; var xBase = 200; var step; var currStep = 0; var Xpos = 1; var Ypos = 1; if (document.all) { function MoveHandler(){ Xpos = document.body.scrollLeft+event.x; Ypos = document.body.scrollTop+event.y; } document.onmousemove = MoveHandler; } else if (document.layers) { function xMoveHandler(evnt){ Xpos = evnt.pageX; Ypos = evnt.pageY; } window.onMouseMove = xMoveHandler; } function animateLogo() { if (document.all) { yBase = window.document.body.offsetHeight/4; xBase = window.document.body.offsetWidth/4; } else if (document.layers) { yBase = window.innerHeight/4; xBase = window.innerWidth/4; } if (document.all) { for ( i = 0 ; i < starsDiv.all.length ; i++ ) {step=3; starsDiv.all[i].style.top = Ypos + yBase*Math.cos((currStep + i*4)/12)*Math.cos(0.7+currStep/200); starsDiv.all[i].style.left = Xpos + xBase*Math.sin((currStep + i*3)/10)*Math.sin(8.2+currStep/400); for (ai=0; ai < Clrs.length; ai++) { var c=Math.round(Math.random()*[ai]); } starsDiv.all[i].style.background=Clrs[c]; } } else if (document.layers) { for ( j = 0 ; j < 14 ; j++ ) //number of NS layers! {step = 4; var templayer="a"+j document.layers[templayer].top = Ypos + yBase*Math.sin((currStep + j*4)/12)*Math.cos(0.7+currStep/200); document.layers[templayer].left = Xpos + xBase*Math.sin((currStep + j*3)/10)*Math.sin(8.2+currStep/400); for (aj=0; aj < Clrs.length; aj++) { var c=Math.round(Math.random()*[aj]); } document.layers[templayer].bgColor=Clrs[c]; } } currStep+= step; setTimeout("animateLogo()", 10); } animateLogo(); // --> </script><br />

Conjunto de bolas persiguiendo al cursor.
<!--inserta aqui tantas imágenes como quieras que sigan al cursor --><br /> <div id="dot0" style="position: absolute; visibility: hidden; height: 11; width: 11; left: 12; top: 0"><img src="../../imagenes/AM11.gif" height=11 width=11></div><div id="dot1" style="position: absolute; height: 11; width: 11;"><img src="../../imagenes/AM11.gif" height=8 width=8></div><div id="dot2" style="position: absolute; height: 11; width: 11;"><img src="../../imagenes/AM11.gif" height=8 width=8></div><div id="dot3" style="position: absolute; height: 11; width: 11;"><img src="../../imagenes/AM11.gif" height=8 width=8></div><div id="dot4" style="position: absolute; height: 11; width: 11;"><img src="../../imagenes/AM11.gif" height=8 width=8></div><div id="dot5" style="position: absolute; height: 11; width: 11;"><img src="../../imagenes/AM11.gif" height=8 width=8></div><div id="dot6" style="position: absolute; height: 11; width: 11;"><img src="../../imagenes/AM11.gif" height=8 width=8></div><div id="dot7" style="position: absolute; height: 11; width: 11;"><img src="../../imagenes/AM11.gif" height=8 width=8></div><div id="dot8" style="position: absolute; height: 11; width: 11;"><img src="../../imagenes/AM11.gif" height=8 width=8></div><br /> <script LANGUAGE="JavaScript"> <!-- hide code /* Elastic Trail script (By Philip Winston @ pwinston@yahoo.com, URL:http://members.xoom.com/ebullets) Script featured on Dynamicdrive.com For this and 100's more DHTML scripts, visit http://dynamicdrive.com Apaptado y traducido al español por http://www.losrecursosgratis.com. Mas de 100 JavaScript en tu idioma y con ejemplos reales. */ // Thanks to Troels Jakobsen <tjak@get2net.dk> // configura el número de imágenes que seguiran al cursor. No olvides poner las mismas que hayas insertado anteriormente. var nDots = 9; if (document.all&&window.print) document.body.style.cssText="overflow-x:hidden;overflow-y:scroll" var Xpos = 0; var Ypos = 0; // variable de tiempo var DELTAT = .01; // distancia entre las imágenes var SEGLEN = 4; // variable de la elasticidad (preferible no poner mucho) var SPRINGK = 10; // constantes físicas supuestas; la imagen se conporta como un cuerpo var MASS = 1; var GRAVITY = 50; var RESISTANCE = 10; var STOPVEL = 0.1; var STOPACC = 0.1; var DOTSIZE = 11; var BOUNCE = 0.75; var isNetscape = navigator.appName=="Netscape"; var followmouse = true; var dots = new Array(); init(); function init() { var i = 0; for (i = 0; i < nDots; i++) { dots[i] = new dot(i); } if (!isNetscape) { // I only know how to read the locations of the // <LI> items in IE //skip this for now // setInitPositions(dots) } // set their positions for (i = 0; i < nDots; i++) { dots[i].obj.left = dots[i].X; dots[i].obj.top = dots[i].Y; } if (isNetscape) { // start right away since they are positioned // at 0, 0 startanimate(); } else { // let dots sit there for a few seconds // since they're hiding on the real bullets setTimeout("startanimate()", 2000); } } function dot(i) { this.X = Xpos; this.Y = Ypos; this.dx = 0; this.dy = 0; if (isNetscape) { this.obj = eval("document.dot" + i); } else { this.obj = eval("dot" + i + ".style"); } } function startanimate() { setInterval("animate()", 20); } // This is to line up the bullets with actual LI tags on the page // Had to add -DOTSIZE to X and 2*DOTSIZE to Y for IE 5, not sure why // Still doesn't work great function setInitPositions(dots) { // initialize dot positions to be on top // of the bullets in the <ul> var startloc = document.all.tags("LI"); var i = 0; for (i = 0; i < startloc.length && i < (nDots - 1); i++) { dots[i+1].X = startloc[i].offsetLeft startloc[i].offsetParent.offsetLeft - DOTSIZE; dots[i+1].Y = startloc[i].offsetTop + startloc[i].offsetParent.offsetTop + 2*DOTSIZE; } // put 0th dot above 1st (it is hidden) dots[0].X = dots[1].X; dots[0].Y = dots[1].Y - SEGLEN; } // just save mouse position for animate() to use function MoveHandler(e) { Xpos = e.pageX; Ypos = e.pageY; return true; } // just save mouse position for animate() to use function MoveHandlerIE() { Xpos = window.event.x + document.body.scrollLeft; Ypos = window.event.y + document.body.scrollTop; } if (isNetscape) { document.captureEvents(Event.MOUSEMOVE); document.onMouseMove = MoveHandler; } else { document.onmousemove = MoveHandlerIE; } function vec(X, Y) { this.X = X; this.Y = Y; } // adds force in X and Y to spring for dot[i] on dot[j] function springForce(i, j, spring) { var dx = (dots[i].X - dots[j].X); var dy = (dots[i].Y - dots[j].Y); var len = Math.sqrt(dx*dx + dy*dy); if (len > SEGLEN) { var springF = SPRINGK * (len - SEGLEN); spring.X += (dx / len) * springF; spring.Y += (dy / len) * springF; } } function animate() { // dots[0] follows the mouse, // though no dot is drawn there var start = 0; if (followmouse) { dots[0].X = Xpos; dots[0].Y = Ypos; start = 1; } for (i = start ; i < nDots; i++ ) { var spring = new vec(0, 0); if (i > 0) { springForce(i-1, i, spring); } if (i < (nDots - 1)) { springForce(i+1, i, spring); } // air resisitance/friction var resist = new vec(-dots[i].dx * RESISTANCE, -dots[i].dy * RESISTANCE); // compute new accel, including gravity var accel = new vec((spring.X + resist.X)/ MASS, (spring.Y + resist.Y)/ MASS + GRAVITY); // compute new velocity dots[i].dx += (DELTAT * accel.X); dots[i].dy += (DELTAT * accel.Y); // stop dead so it doesn't jitter when nearly still if (Math.abs(dots[i].dx) < STOPVEL && Math.abs(dots[i].dy) < STOPVEL && Math.abs(accel.X) < STOPACC && Math.abs(accel.Y) < STOPACC) { dots[i].dx = 0; dots[i].dy = 0; } // move to new position dots[i].X += dots[i].dx; dots[i].Y += dots[i].dy; // get size of window var height, width; if (isNetscape) { height = window.innerHeight + document.scrollTop; width = window.innerWidth + document.scrollLeft; } else { height = document.body.clientHeight + document.body.scrollTop; width = document.body.clientWidth + document.body.scrollLeft; } // bounce of 3 walls (leave ceiling open) if (dots[i].Y >= height - DOTSIZE - 1) { if (dots[i].dy > 0) { dots[i].dy = BOUNCE * -dots[i].dy; } dots[i].Y = height - DOTSIZE - 1; } if (dots[i].X >= width - DOTSIZE) { if (dots[i].dx > 0) { dots[i].dx = BOUNCE * -dots[i].dx; } dots[i].X = width - DOTSIZE - 1; } if (dots[i].X < 0) { if (dots[i].dx < 0) { dots[i].dx = BOUNCE * -dots[i].dx; } dots[i].X = 0; } // move img to new position dots[i].obj.left = dots[i].X; dots[i].obj.top = dots[i].Y; } } // end code hiding --> </script><br />

Anular boton de la derecha.
<!-- Botón derecho del mouse --><br /> <br /> <script LANGUAGE="JavaScript1.1"> <!-- Adaptado por Tk: Compatible con IE y NS --> function derecha(e) { if (navigator.appName == 'Netscape' && (e.which == 3 || e.which == 2)){ alert('Botón derecho inhabilitado') return false; } else if (navigator.appName == 'Microsoft Internet Explorer' && (event.button == 2)){ alert('Botón derecho inhabilitado') } } document.onmousedown=derecha </script><br />

Anular boton de la izquierda.
><!-- Botón izquierdo del mouse --><br /> <br /> <script LANGUAGE="JavaScript1.1"> <!-- Adaptado por Tk: Compatible con IE y NS --> function izquierda(e) { if (navigator.appName == 'Netscape' && (e.which == 1 || e.which == 2)){ alert('Botón izquierdo inhabilitado') return false; } else if (navigator.appName == 'Microsoft Internet Explorer' && (event.button == 1)){ alert('Botón izquierdo inhabilitado') } } document.onmousedown=izquierda </script><br />

Anular boton de la derecha e izquierda.
<!-- Botón izquierdo y derecho del mouse --><br /> <br /> <script LANGUAGE="JavaScript1.1"> <!-- Adaptado por Tk: Compatible con IE y NS --> function ambos(e) { if (navigator.appName == 'Netscape' && (e.which == 1 || e.which == 3 || e.which == 2)){ alert('Los botones del mouse han sido inhabilitados') return false; } else if (navigator.appName == 'Microsoft Internet Explorer' && (event.button == 1 || event.button == 2)){ alert('Los botones del mouse han sido inhabilitados') } } document.onmousedown=ambos </script><br />


ALGUNAS RECOMENDACIONES PARA INCLUIR LOS CÓDIGOS

Debes copiar el contenido de los cuadros de textos (CTRL + C) y luego pegarlo en tu editor de HTML ( CRTL + V). Normalmente si es un editor gráfico (tipo FrontPage o Nestcape composer) será muy sencillo; vas a Insertar código HTML y lo pegas allí; por defecto te lo pega entre las etiquetas ; la mayoria de los que tenemos incluidos en nuestra página, y por norma general, van incluidos ahí, por lo que no deberás hacer más; pero hay partes de código, o a veces incluso todo el código (esta comentado en el mismo código, ya que aparece entre dos etiquetas distintas a ) deberás insertarlo en donde el código te indique (normalmente entre las etiquetas ). Para incluirlo allí, sólo debes cortar el código correspondiente a esta parte de las etiquetas y pegarlo en su sitio.
Por último, y si se necesita, sustituye los parámetros de ejemplos por los tuyos (Links, fuentes...) y a funcionar. Te recomendamos que los pruebes primero en una página nueva, para que te familiarices con su funcionamiento, y posteriormente los adaptes a lo que busques y lo pegues en tu página.

Botones de navegacion.

Botones para la navegacion de tu web.

Este código crea unos botones de navegación: atrás, arriba y adelante.
También puedes usar solo el botón Top para subir arriba de cada página.
Lo puedes pegar tantas veces quieras en la misma página.

Copia y Pega el siguiente código en tu vista HTML en el lugar donde quieras que aparezcan.

<table border="0" bgcolor="#FFCC66"><tr> <td align="center"><br /> <input type="button" value=" << " onclick="javascript:window.history.go(-1);"><br /> <input type="button" value="Top" onclick="document.location='#top';"><br /> <input type="button" value=" >> " onclick="javascript:window.history.go(1);"></td> </tr> </table><!-- End Navigation -->

Ejemplo: aqui no podrán apreciar el antes y despues, pero si el boton de ir arriba.

Efecto de luz en la imagen.

Efecto muy bueno para tus imagenes.

Este código crea un tipo de luz como una linterna en el puntero del ratón.


Copia y Pega el siguiente código dentro de las etiquetas <head> y </head> en vista HTML de tu pagina web.
 
<style>
<!--#myimage{filter:light}-->
</style>

Y este otro lo pones dentro del <body>

<body bgcolor="#000000">
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center">
<img id="myimage" src="images/bola2.jpg" width="230" height="230">
<script language="JavaScript1.2">
s = 50; // the size of the spotlight
vp = 10; // the visibility percent of the picture
startx = 0; // the top position of your sportlight into the image (on start)
starty = 0; // the left position of your spotlight into the image (on start)
var IE = document.all?true:false
function moveL()
{xv = tempX; yv = tempY; myimage.filters.light.MoveLight(1,xv,yv,s,true);}
if (IE&&myimage.filters)
document.all.myimage.onmousemove = getMouseXY;
var tempX = 0
var tempY = 0
function getMouseXY(e) {tempX = event.offsetX
tempY = event.offsetY
if (tempX < 0){tempX = 0}
if (tempY < 0){tempY = 0}
if (t)
{moveL();}
return true
}
var xv = startx;
var yv = starty;
var t= true;
if (IE&&myimage.filters){
myimage.style.cursor="hand";
myimage.filters.light.addAmbient(255,255,255,vp)
myimage.filters.light.addPoint(startx,starty,s,255,255,255,255)
}
</script>

Puedes editar la linea de color rojo.
Cambiando la URL de la imagen, y tambien la altura y el ancho.