En ocasiones, insertamos imágenes en los artículos del blog y nos gustaría explicar elemento a elemento lo que nuestros lectores verán en ellas (como le ha pasado a nuestro amigo EC-JPR en su último artículo). La mejor forma de realizar esto es mediante los llamados mapas de imágenes con CSS (no confundir con los mapas HTML —etiqueta <map>—, también interesantes, pero menos potentes). Para ver qué es esto, nada mejor que acudir directamente a un ejemplo.
Existen muchísimos tutoriales sobre este tema. Una simple búsqueda en Google nos arroja un montón de resultados interesantes como el muy recomendable How to create an image map using CSS: quizás el mejor que podréis encontrar —precisamente, cuenta cómo llegar a crear el ejemplo anterior—. Os animo a explorar otros tutoriales en los que hallaréis buenas ideas.
Yo nunca he necesitado un mapa de imagen, y es por ello que he adaptado el ejemplo de más arriba a la necesidad de EC-JPR a modo de ejercicio. Lo dejo aquí para posterior uso mío, por si lo necesitase más adelante, y por supuesto para todos vosotros. Tiene algunos cambios/mejoras con respecto al ejemplo.
Código HTML que va insertado en el cuerpo del post:
[code lang=»html» collapse=»true»]<dl id="ambumap" class="aligncenter">
<dt id="title" title="Ambulancia">
<span>Ambulancia</span>
</dt>
<dd id="ambu1">
<p title="Botellas de oxígeno medicinal"><span>Las <strong>botellas de oxígeno medicinal</strong> están conectadas a la instalación de la furgoneta para alimentar las distintas tomas de pared.</span></p>
</dd>
<dd id="ambu2">
<p title="Collarines, férulas"><span>Los <strong>collarines</strong> mantienen rígido el eje cabeza-tronco, algo crucial si no queremos desnucar a un accidentado con fracturas vertebrales altas. Y las <strong>férulas</strong>, que inmovilizan una extremidad fracturada.</span></p>
</dd>
<dd id="ambu3">
<p title="Colchón de vacío"><span>Un <strong>colchón de vacío</strong> es un colchón lleno de bolitas de plástico que se adapta a la forma del enfermo, y que se queda rígido cuando lo vaciamos de aire. Es muy útil para transportar a pacientes que no se pueden menear demasiado (no conviene tener danzando las fracturas de un politraumatizado).</span></p>
</dd>
<dd id="ambu4">
<p title="Gasas, vendas, goteros…"><span><strong>Sueros</strong> de todos los tipos y sabores: <a href="http://www.flickr.com/photos/ec-jpr/4976465960/" title="Distintas bolsas de fluidos IV [Flickr]">salino, glucosado, Plasmalyte, Gelafundina</a>, etc. Y, a su lado, material de curas: <strong>vendas, gasas, Betadine, tensiómetro</strong>… pero esto sale mejor en otra foto.</span></p>
</dd>
<dd id="ambu5">
<p title="Tablero espinal, camilla de cuchara"><span>Un <strong>tablero espinal</strong> (porque, si la columna vertebral está jodida, el blando colchón de la camilla no es la mejor opción) y una <strong>camilla de cuchara</strong>, que es como un tablero pero se abre por el medio, para recoger al paciente del suelo <a href="http://www.youtube.com/watch?v=Igv3tEYQXs4">moviéndolo lo menos posible</a>. Como curiosidad, son de plástico para poder hacer radiografías sin necesidad de retirarlas.</span></p>
</dd>
<dd id="ambu6">
<p title="Mochilas de ataque"><span>Unas <strong>mochilas “de ataque”</strong>, con material de primera intervención.</span></p>
</dd>
<dd id="ambu7">
<p title="Silla para rescate en edificios"><span>Una <strong>silla plegable</strong> para evacuar al enfermo desde un edificio, porque la camilla no cabe en el ascensor.</span></p>
</dd>
<dd id="ambu8">
<p title="Cascos y gafas de protección"><span><strong>Cascos y gafas de protección</strong>.</span></p>
</dd>
<dd id="ambu9">
<p title="Respirador"><span><strong>Respirador</strong>.</span></p>
</dd>
<dd id="ambu10">
<p title="Control luces y ventilación"><span><strong>Control luces y ventilación</strong>.</span></p>
</dd>
<dd id="ambu11">
<p title="Lámparas, asideros"><span><strong>Lámparas, asideros…</strong>.</span></p>
</dd>
</dl>[/code]
Código CSS que va insertado en un campo personalizado del post:
[code lang=»css» collapse=»true»]/* set the size of the definition list <dl> and add the background image */
#ambumap {
display:block;
width:450px;
height:579px;
background:url(https://www.enchufa2.es/wp-content/uploads/2010/09/4689detras.jpg) no-repeat;
position:relative;
font-size:12px;
}
#ambumap p {
margin:0;
}
/* set up the definition list <dt><a> to hold the background image for the hover state */
#ambumap #title {
display:block;
width:450px;
height:0;
padding-top:579px;
overflow:hidden;
position:absolute;
left:0;
top:0;
background:transparent url(https://www.enchufa2.es/wp-content/uploads/2010/09/4689detras.jpg) no-repeat;
}
/* the hack for IE pre IE6 */
* html #ambumap #title {
height:579px;
he\ight:0;
}
/* the <dt><a> hover style to move the background image to position 0 0 */
#ambumap #title:hover {
background-position: -450px 0;
z-index:10;
}
/* place the <dd>s in the correct absolute position */
#ambumap dd {
position:absolute;
padding:0;
margin:0;
}
#ambumap #ambu1 {
left:18px;
top:259px;
z-index:20;
}
#ambumap #ambu2 {
left:100px;
top:79px;
z-index:20;
}
#ambumap #ambu3 {
left:94px;
top:252px;
z-index:20;
}
#ambumap #ambu4 {
left:100px;
top:145px;
z-index:20;
}
#ambumap #ambu5 {
left:268px;
top:155px;
z-index:20;
}
#ambumap #ambu6 {
left:288px;
top:180px;
z-index:20;
}
#ambumap #ambu7 {
left:354px;
top:184px;
z-index:20;
}
#ambumap #ambu8 {
left:343px;
top:88px;
z-index:20;
}
#ambumap #ambu9 {
left:200px;
top:130px;
z-index:20;
}
#ambumap #ambu10 {
left:166px;
top:160px;
z-index:20;
}
#ambumap #ambu11 {
left:176px;
top:84px;
z-index:20;
}
/* style the <dd><a> links physical size and the background image for the hover */
#ambumap #ambu1 p {
display:block;
width:78px;
height:228px;
z-index:20;
}
#ambumap #ambu2 p {
display:block;
width:70px;
height:85px;
z-index:20;
}
#ambumap #ambu3 p {
display:block;
width:44px;
height:85px;
z-index:20;
}
#ambumap #ambu4 p {
display:block;
width:51px;
height:73px;
z-index:20;
}
#ambumap #ambu5 p {
display:block;
width:20px;
height:205px;
z-index:20;
}
#ambumap #ambu6 p {
display:block;
width:35px;
height:180px;
z-index:20;
}
#ambumap #ambu7 p {
display:block;
width:80px;
height:200px;
z-index:20;
}
#ambumap #ambu8 p {
display:block;
width:85px;
height:85px;
z-index:20;
}
#ambumap #ambu9 p {
display:block;
width:56px;
height:32px;
z-index:20;
}
#ambumap #ambu10 p {
display:block;
width:100px;
height:25px;
z-index:20;
}
#ambumap #ambu11 p {
display:block;
width:100px;
height:40px;
z-index:20;
}
/* style the span text so that it is not initially displayed */
#ambumap p span {
display:none;
}
/* show border when hovered */
#ambumap p:hover {
border:1px solid white;
}
/* define the common styling for the span text */
#ambumap p:hover span {
position:absolute;
width:320px;
display:block;
background:#eee;
color:#000;
border:1px solid #000;
padding:5px;
}
/* move the span text to a common position */
#ambumap #ambu1 p:hover span {
left:32px;
top:248px;
}
#ambumap #ambu2 p:hover span {
left:-50px;
top:105px;
}
#ambumap #ambu3 p:hover span {
left:-44px;
top:105px;
}
#ambumap #ambu4 p:hover span {
left:-50px;
top:93px;
}
#ambumap #ambu5 p:hover span {
left:-218px;
top:225px;
}
#ambumap #ambu6 p:hover span {
left:-238px;
top:200px;
}
#ambumap #ambu7 p:hover span {
left:-304px;
top:220px;
}
#ambumap #ambu8 p:hover span {
left:-293px;
top:105px;
}
#ambumap #ambu9 p:hover span {
left:-150px;
top:52px;
}
#ambumap #ambu10 p:hover span {
left:-116px;
top:45px;
}
#ambumap #ambu11 p:hover span {
left:-126px;
top:60px;
}[/code]
Resultado:
- Ambulancia
-
Las botellas de oxígeno medicinal están conectadas a la instalación de la furgoneta para alimentar las distintas tomas de pared.
-
Los collarines mantienen rígido el eje cabeza-tronco, algo crucial si no queremos desnucar a un accidentado con fracturas vertebrales altas. Y las férulas, que inmovilizan una extremidad fracturada.
-
Un colchón de vacío es un colchón lleno de bolitas de plástico que se adapta a la forma del enfermo, y que se queda rígido cuando lo vaciamos de aire. Es muy útil para transportar a pacientes que no se pueden menear demasiado (no conviene tener danzando las fracturas de un politraumatizado).
-
Sueros de todos los tipos y sabores: salino, glucosado, Plasmalyte, Gelafundina, etc. Y, a su lado, material de curas: vendas, gasas, Betadine, tensiómetro… pero esto sale mejor en otra foto.
-
Un tablero espinal (porque, si la columna vertebral está jodida, el blando colchón de la camilla no es la mejor opción) y una camilla de cuchara, que es como un tablero pero se abre por el medio, para recoger al paciente del suelo moviéndolo lo menos posible. Como curiosidad, son de plástico para poder hacer radiografías sin necesidad de retirarlas.
-
Unas mochilas “de ataque”, con material de primera intervención.
-
Una silla plegable para evacuar al enfermo desde un edificio, porque la camilla no cabe en el ascensor.
-
Cascos y gafas de protección.
-
Respirador.
-
Control luces y ventilación.
-
Lámparas, asideros….
Para incluir el código CSS necesario, hago uso del plugin para WordPress Per-Post CSS. Podéis descargarlo aquí, porque el original tiene un pequeño error.
Siempre he creído que EC-JPR era un tipo grande. De tí opinaba lo mismo. Pero veo que juntos podríais llegar a dominar el mundo…
Gracias por compartir esto, que me va a venir de perlas. Y el plugin para insertar código en WordPress… No había manera de encontrar uno que me funcionara bien. Esperemos que este sí.
Abrazos.