Ptite_Perle
A les clefs du forum
Je tiens le trousseau de clefs du forum
Fondatrice Messages : 5859 Venue : 27/06/2009 Je suis : Age : 60 Je vie à : Lyon Humeur : Bonne humeur Mes Points : 120861 Diapositives | | Coucou Coller le code là où il accepte le HTML. Dans les widgets Dans les annonces Dans le message de l'index Pages HTML Messages si HTML est activé dans le panneau d'administration. Si tu es à l'aise avec le code, tu peux ajouter des lignes pour tes images en plus. - Code:
-
<div id="ayax1"> <div id="ayaximages" style="left: 0px; "> <a href="URL a donde redirijirá al hacer click en la imagen1"><img src="URLIMAGEN1"></a> <a href="URL a donde redirijirá al hacer click en la imagen2"><img src="URLIMAGEN2"></a> <a href="URL a donde redirijirá al hacer click en la imagen3"><img src="URLIMAGEN3"></a> <a href="URL a donde redirijirá al hacer click en la imagen4"><img src="URLIMAGEN4"></a> <a href="URL a donde redirijirá al hacer click en la imagen5"><img src="URLIMAGEN5"></a> <a href="URL a donde redirijirá al hacer click en la imagen6"><img src="URLIMAGEN6"></a> <a href="URL a donde redirijirá al hacer click en la imagen7"><img src="URLIMAGEN7"></a> <a href="URL a donde redirijirá al hacer click en la imagen8"><img src="URLIMAGEN8"></a> </div> </div> <div id="ayaxlinks"> <a onclick="srcANIMayax(0);" href="javascript:void(0);">1</a> <a onclick="srcANIMayax(1);" href="javascript:void(0);">2</a> <a onclick="srcANIMayax(2);" href="javascript:void(0);">3</a> <a onclick="srcANIMayax(3);" href="javascript:void(0);">4</a> <a onclick="srcANIMayax(4);" href="javascript:void(0);">5</a> <a onclick="srcANIMayax(5);" href="javascript:void(0);">6</a> <a onclick="srcANIMayax(6);" href="javascript:void(0);">7</a> <a onclick="srcANIMayax(7);" href="javascript:void(0);">8</a> </div>
<style>
#ayax1 { /*zona destinada a la visualización de las imágenes */ height: 375px; width: 500px; /* ancho imágenes */ margin: 0 auto; overflow: hidden; position: relative; -moz-border-shadow: 0 0 10px black; border-shadow: 0 0 10px black; -webkit-border-shadow: 0 0 10px black; -o-border-shadow: 0 0 10px black; } #ayaximages { position: absolute; left: 0; top: 0; width: 3500px; /* ancho imagen * número de imágenes */ moz-transition: all 1s ease-in-out; -webkit-transition: all 1s.ease-in-out; -o-transition: all 1s.ease-in-out; transition: all 1s ease-in-out; } /* las imágenes, tamaño height y width*/ #ayaximages img { -moz-transition: all 4s ease-in-out; -webkit-transition: all 4s.ease-in-out; -o-transition: all 4s.ease-in-out; transition: all 4s ease-in-out; height: 375px; width: 500px; /* ancho imagenes */ } /* Ahora los botones , donde se cambia la visualización y colores*/ /* Botonera */ #ayaxlinks { padding: 7px 0; width: 600px; background-image: none; background-repeat: repeat-x; background-color: #; border: 1px #000000: ; text-align: center; margin-right: 250px; } /* el HOVER al pasar el mouse sobre los botones*/ #ayaxlinks:hover { padding: 7px 0; width: 600px; background-image: none; background-repeat: repeat-x; background-color: #; border: 1px #000000: ; text-align: center; margin-top: 1px; } /* EL COLOR DEL TEXTO/LINKS */ #ayaxlinks a { background-color: #292929; border-radius: 8px; box-shadow: 0 0 5px #292929; margin: 0 2px; padding: 10px 10px; text-decoration: none; } /* HOVER DE LOS LINKS AL PASAR EL MOUSE */ #ayaxlinks a:hover { box-shadow: 0 0 8px #292929; color: white; text-shadow: 2px 2px 2px; black } </style>
<script> //<![CDATA[ function srcANIMayax(num) { var mover = num * 500; document.getElementById("ayaximages").style.left = -mover + "px"; } //]]> </script>
|
| |