Editando apunte: Rollover en mapa. Caso de estudio

Editando apunte: Rollover en mapa. Caso de estudio cerrar apuntes

ID: 35 (tabla: apuntes) Título:
Fecha: [poner fecha actual ]
Categorías: Así se hizo, Vicisitudes de un Webmaster, Programación
Etiquetas: amigos, Caricaturas, diseño, imágenes, php, webmaster
Extras: amigos, Caricaturas, diseño, imágenes, php, webmaster
apunte: - - - - - - - -

<p>
	[rss]Mi amigo Jorge Ganderatz (<a href="http://www.caricaturasmarbella.com" >Caricaturas "San Jorge"</a>) me pidió cambiar de su página el efecto que copiamos a continuación[/rss]: 
</p>
<div style="margin: 1em auto">
	<div id="contenedor_de_imagenes" style="position: relative; margin: auto; text-align: center; width: 600px; height: 329px" > 
		<img src="diario.imagen.php?id=51&max=700" alt="Foto-caricatura de familia. Minicon Benalmádena 2005" title="Foto-caricatura de familia. Minicon Benalmádena 2005" longdesc="diario.ficha.php?id=51" style="position: relative; margin: 0; top: 0; left: 0;" />
		<img src="http://www.caricaturasmarbella.com/transpa.gif" style="position: absolute; top: 0; left: 0; margin: 0; background-image: url(http://www.caricaturasmarbella.com/dibujos/grid.gif); visibility: hidden" id="rollover" alt="transparencia"/>

<map name="mapa" id="mapa"> 
	<area id="area_vieja_1" shape="circle" coords="256,39,38" title="Caricatura de Jorge Ganderatz" alt="Caricatura de Jorge Ganderatz" href="javascript: return false" />
	<area id="area_vieja_2" shape="poly" coords="544,293,550,246,588,246,583,293" title="Firma-Logo de Jorge Ganderatz" alt="Firma-Logo de Jorge Ganderatz" href="javascript: return false" /> 
</map>
<p>
	Por el mismo efecto pero con la siguiente imagen:
</p>
<form action="diario.jocker.php" target="oculto" method="get" style="margin: 1em auto; text-align: center; position: relative"><input type="hidden" name="PHPSESSID" value="71hfodciolea497u0i265ru2t7" />
	<div style="width: 600px; height: 394px; position: relative; margin: auto" >
	<input type="image" src="diario.imagen.php?id=48&max=600&PHPSESSID=71hfodciolea497u0i265ru2t7" alt="Foto de familia" title="Foto de familia" id="imagen_efecto" style="position: absolute; top: 0; left: 0" />
	<img src="diario.imagen.php?id=32" id="efecto_rollover" alt="rollover" style="position: absolute; top: 0; left: 0; width: 600px; height: 394px; visibility: hidden" />
	</div>
	<input type="hidden" name="extra" value="jocker.coordenadas" />
</form>
<p>
	... pero con un tamaño algo mayor (que no mostramos en este apunte para evitar que se descuadre mucho la página).
</p>
<p>
	En principio tenemos que averiguar las nuevas coordenadas del círculo donde se encuentra nuestro amigo, y para ello nos basta con convertir la imagen en un control "image" de un formulario y pinchar con el ratón sobre él.
</p>
<p>
	Se trata de algo parecido al apunte titulado "<a href="?titulo=Colores&PHPSESSID=71hfodciolea497u0i265ru2t7">Colores</a>". Cuando pinchemos en su sitio veremos las coordenadas en el recuadro adjunto, al que hemos añadido otros datos necesarios como el radio del círculo y el color del mismo.
</p>
<form action="diario.jocker.php" name="efecto" method="get" target="_blank" style="margin: 1em auto" onsubmit="return mostrar_circulo(this)"><input type="hidden" name="PHPSESSID" value="71hfodciolea497u0i265ru2t7" />
	<input type="hidden" name="extra" value="resalte_circular" />
	<fieldset >
		<legend>
			Datos del efecto
		</legend>
		<fieldset>
			<legend>
				Tamaño de la imágen
			</legend>
			<label for="ancho_efecto">ancho:</label><input id="ancho_efecto" type="text" name="ancho" value="600" readonly="readonly" />
			<label for="alto_efecto">alto:</label><input id="alto_efecto" type="text" name="alto" value="394" readonly="readonly" />
		</fieldset>
		<fieldset>
			<legend>
				Coordenadas (captura)
			</legend>
			<label for="coor_x">x:</label><input id="coor_x" type="text" name="x" value="" readonly="readonly" />
			<label for="coor_y">y:</label><input id="coor_y" type="text" name="y" value="" readonly="readonly" />
		</fieldset>
		<fieldset>
			<legend>
				Otras variables
			</legend>
			<label for="radio_efecto">radio:</label><input id="radio_efecto" type="text" name="radio" value="25" readonly="readonly" />
			<label for="color_efecto">color:</label><input id="color_efecto" type="text" name="color" value="#FF0000" readonly="readonly" />
			<label for="grosor_efecto">grosor:</label><input id="grosor_efecto" type="text" name="grosor" value="2" readonly="readonly" />
		</fieldset>
		<button type="submit" id="crear_resalte" style="text-align: center; width: 100%" disabled="disabled" >
			Crear Resalte
		</button>

</fieldset>
</form>
<iframe name="oculto" style="display: none"></iframe>
<p>
	Para este apunte crearemos la figura que nos servirá para mezclar con la imagen original y obtener el círculo rojo con la caricatura de nuestro amigo
</p>
<p>
	Tan solo quedan pequeños detalles para conseguir nuestro efecto, pero lo dejaremos para que estimulen su imaginación quienes necesiten usarlo. Tan solo mostraremos el código que hemos usado para crear nuestra imagen:
</p>
<pre class="codigo">$ancho = $_GET["ancho"];
$alto = $_GET["alto"];
$x = $_GET["x"];
$y = $_GET["y"];
$diametromenor = (int) $_GET["radio"] * 2;
$diametromayor = ((int) $_GET["grosor"] * 2) + $diametromenor;
$figura = imagecreatetruecolor($ancho, $alto);
$fondo = imagecolorallocate($figura, 255, 255, 255);
imagefill($figura, 0, 0, $fondo);
$rojo = imagecolorallocate($figura, 255, 0, 0);
imagefilledellipse($figura, $x, $y, $diametromayor, $diametromayor, $rojo);
$negro = imagecolorallocate($figura, 0, 0, 0);
imagefilledellipse($figura, $x, $y, $diametromenor, $diametromenor, $negro);
imagecolortransparent($figura, $negro);
header("Content-Type: image/png");
imagepng($figura);
imagedestroy($figura);</pre>
<p>
	Solo nos queda mencionar que con el mismo formulario tenemos los datos necesarios para crear el área de imagen que usaremos para el efecto rollover.
</p>

Controles Otras tablas: imagenes, postales, categorias, etiquetas, extras - - (popup ) - que

Seleccionar nuevo apunte

categoria Nombre:
Controles Otras tablas: apuntes, imagenes, postales, etiquetas extras - - Seleccionar: categoria
Descripción: - - - - - - - -	Apuntes

extra Nombre:
Controles Otras tablas: apuntes, imagenes, postales, categorias etiquetas - - Seleccionar: extra
Descripción: - - - - - - - -	Apuntes

etiqueta Nombre:
Controles Otras tablas: apuntes, imagenes, postales, categorias extras - - Seleccionar: etiqueta
Descripción: - - - - - - - -	Apuntes

Editor del diario

Zona de comentarios

Evaluación