Cambiar partes de una misma imagen

¿Cuantas veces tienes una imagen y quieres que cuando se pase el ratón por una parte de dicha imágen esta cambie pero solamente ese trozo de la imagen?

Si, esto es muy cierto, pues en el HTML tenemos lo que son los mapas, esos rectángulos, círculos y polígonos que muchas vidas han salvado ;) muy vistas en mapas (de ahí que se llamen mapas de imágenes!) pero sólo sirven para enlzar a otras páginas pulsando en esa zona.

Y ya lo que quieres es cambiar la imagen cuando pase por encima: no-problemo, eso es facil.

primero nos creamos el script:

function cambiaImg(ruta_img)
{
document.getElementById('laimg').src = ruta_img;
//laimg es el id de la imagen
}

El siguiente código script es el mismo que el anterio pero para cambiar más de una imagen, me explico: en el anterior usando esta función simplente cambias una (en este caso 'laimg') y aqui pasamos dos parámetros el identificador y la ruta de la imagen en cuestión.

function cambiaImg(id_img, ruta_img)
{
document.getElementById(id_img).src = ruta_img;
}

Y en el del mapa ponemos estos eventos...

onmouseover="cambiaImg('imgs/ima.GIF')" //cambiar
onmouseout="cambiaImg('imgs/im0.GIF')" //restaurar

Descargar ejemplo

Imagen de fondo expandida

A muchos y muchas les ha pasado los siguiente: tienen una imagen de fondo y solo se ve lo que ocupa la pantalla y no se expanda, y los repeat-x y repeat-y no hacen milagros, ni incluso los "fix" imagen.

Se queda el fondo descuadrado.

Pues, la solución está aquí. Consiste en utilizar una imagen que ocupe el 100% de la pantalla y se reajuste según los tamaños de la misma

Ved esta página [http://www.cssplay.co.uk/layouts/background.html]


Según el código de la página, para definir la imagen de fondo se haría de la siguiente manera...

<div>
<img id="background" src="<!-- aqui tu imagen -->" alt="" title="" />
</div>

Cambio de atributos de seleccion con css

Hola, que bueno este código css que simplemente es implementado en Firefox, pero a uno ya se le hace la boca agua a que llegue la nueva version de CSS3, donde tendrá implementada esta característica.

En esta version solamente -como dije- funciona en Firefox, pero en Interné Dexploiter pasa, es además que estos estilos CSS están dentro del chrome de Firefox.

En la actual versión no incluye muchas alegrías visuales, pero recemos para que CSS3 venga pronto e imaginate de las cosas de que podrá hacer: cambiar el tamaño de las fuentes, el tipo de letra o ¡piensalo tu mismo para el día que llege!

De momento tenemos estos códigod que nos harán el apaño:

/* Este código cambia el color de la letra a amarillo y el fondo a azul*/
::-moz-selection{
background:#006;
color:#fc0;
}

::selection {
background:#6374AB;
color:#fff;
}

code::-moz-selection {
background: #333333;
}

code::selection {
background: #333333;
}

IDEA:
Puede usar esta técnica para simular la no selección de texto de su web!

Interesantísimos enlaces externos:

• Quirksmode - CSS selection
• Cristalab - Cambiar color de la selección
  

mi entrada nueva

Hola gentes[gentuza], ¿que, como estan? pos yo aqui bien aqui os contaré mijurrias de códigos de HTML (hacheteemeele) Javascript, CSS (céeseese), PHP (péhachepé) y etc (etcétera)