Estoy empezando a desarrollar webs profesionales pero tengo problemas con el diseño web
Estoy empezando a desarrollar webs profesionales, y aunque tengo algunos conocimientos, me pierdo entre tanto programa de diseño web.-
Verás... Lo que intento hacer es un dibujo de una columna vertebral humana, y en función al punto por se donde pase el cursor, debe aparecer un cuadro de texto indicando el nombre de la vertebra y unas funcionalidades.- Un fichero de Photosohop (PPS) en el que tengo ya las vertebras en capas ya marcadas de color.
Más o menos, en Flash podría hacerlo, pero resultará un fichero bastante pesado para la web, por lo que te pido consejo para utilizar algún otro programa; He intentado hacer algo en Macromedia FireWorks, pero no sé cómo hacer que cuando se pulsa sobre una vértebra, aparezca el texto al lado...
Estoy abierto a cualquier sugerencia que puedas hacerme respecto a este trabajo...
Verás... Lo que intento hacer es un dibujo de una columna vertebral humana, y en función al punto por se donde pase el cursor, debe aparecer un cuadro de texto indicando el nombre de la vertebra y unas funcionalidades.- Un fichero de Photosohop (PPS) en el que tengo ya las vertebras en capas ya marcadas de color.
Más o menos, en Flash podría hacerlo, pero resultará un fichero bastante pesado para la web, por lo que te pido consejo para utilizar algún otro programa; He intentado hacer algo en Macromedia FireWorks, pero no sé cómo hacer que cuando se pulsa sobre una vértebra, aparezca el texto al lado...
Estoy abierto a cualquier sugerencia que puedas hacerme respecto a este trabajo...
1 Respuesta
Respuesta de Kike Rodríguez
1
Cuando realizas algo así lo que haces es mapear la imagen para dividirla en distintas zonas, cada una será un link. Eso es muy sencillo de hacer tanto en photoshop como en multitud de programas e incluso "a mano", por ejemplo, una pequeña imagen rectangular, en la que si pulso el la mitad superior enlaza a "enlace1" y si pulso de la mitad hacia abajo a "enlace2":
<body>
<img src="apply_f2.png" width="32" height="32" border="0" usemap="#Map" />
<map name="Map" id="Map">
<area shape="rect" coords="-6,-4,28,15" href="enlace1.html" />
<area shape="rect" coords="-2,16,32,38" href="enlace2.html" />
</map>
</body>
Supongo que hasta aquí lo tenías claro.
Ahora lo que debes es crear "div" con la información sobre cada vértebra en la posición en la que quieres que aparezca, con su hoja de estilos, etc. y con "visibility" como "hidden":
<div class="informacion" id="c1" style="top:200px; left:200px;">Colocar aquí el contenido para class "informacion" id "c1"</div>
En la hoja de estilo defines la clase "información" con sus colores tañamos, tipos de letra, etc. y le das el valor "hidden" (o sea que sea invisible).
Luego con utilizas el comando "onmouseover" con una función en javascript, que según el "id " (en el ejemplo anterior el id era "c1") haga visible dicho "div" y lo oculte al quitar el ratón de esa zona.
Hay formas muy elegante de hacerlo y muy variadas. Te aconsejo que busques algún script que encuentres en la red. Hay librerías que hacen efectos de ese tipo, como dojo (aquí puedes ver algún ejemplo).
Incluso solo con hojas de estilos lo puedes conseguir, prueba este ejemplo:
<head>
<title>CSS Mouseover</title>
<style type="text/css">
div#mouse a {text-decoration: none; }
div#mouse a:hover { border-right: 0 none ; }
div#mouse a span {display: none; }
div#mouse a:hover span {display: block; }
</style>
</head>
<body>
<div id="mouse">
<a href="">Texto o vertebra<span>Un div con más información</span></a>
</div>
</body>
Un saludo,
kike
<body>
<img src="apply_f2.png" width="32" height="32" border="0" usemap="#Map" />
<map name="Map" id="Map">
<area shape="rect" coords="-6,-4,28,15" href="enlace1.html" />
<area shape="rect" coords="-2,16,32,38" href="enlace2.html" />
</map>
</body>
Supongo que hasta aquí lo tenías claro.
Ahora lo que debes es crear "div" con la información sobre cada vértebra en la posición en la que quieres que aparezca, con su hoja de estilos, etc. y con "visibility" como "hidden":
<div class="informacion" id="c1" style="top:200px; left:200px;">Colocar aquí el contenido para class "informacion" id "c1"</div>
En la hoja de estilo defines la clase "información" con sus colores tañamos, tipos de letra, etc. y le das el valor "hidden" (o sea que sea invisible).
Luego con utilizas el comando "onmouseover" con una función en javascript, que según el "id " (en el ejemplo anterior el id era "c1") haga visible dicho "div" y lo oculte al quitar el ratón de esa zona.
Hay formas muy elegante de hacerlo y muy variadas. Te aconsejo que busques algún script que encuentres en la red. Hay librerías que hacen efectos de ese tipo, como dojo (aquí puedes ver algún ejemplo).
Incluso solo con hojas de estilos lo puedes conseguir, prueba este ejemplo:
<head>
<title>CSS Mouseover</title>
<style type="text/css">
div#mouse a {text-decoration: none; }
div#mouse a:hover { border-right: 0 none ; }
div#mouse a span {display: none; }
div#mouse a:hover span {display: block; }
</style>
</head>
<body>
<div id="mouse">
<a href="">Texto o vertebra<span>Un div con más información</span></a>
</div>
</body>
Un saludo,
kike
Genial...
Has captado mi idea a la perfección y tu respuesta es exactamente lo que deseaba...
No quería que el área de cada zona de selección fuese rectangular, sino la superficie de la vertebra, pero aun así, me valdría... ya me caliento yo la cabeza en ver de qué forma puedo solucionarlo.-
Muchas gracias y un saludo.-
Has captado mi idea a la perfección y tu respuesta es exactamente lo que deseaba...
No quería que el área de cada zona de selección fuese rectangular, sino la superficie de la vertebra, pero aun así, me valdría... ya me caliento yo la cabeza en ver de qué forma puedo solucionarlo.-
Muchas gracias y un saludo.-
