Podéis ver mi prueba (bastante menos espectacular, jajajaaa) en un viejo blog de una cuenta que tenía abandonada: Clásica.Para conseguirlo necesitáis lo siguiente:
.- CSS:
<style type="text/css">
#HorizMenu {
margin: 8px auto 20px auto;
position: relative;
width: 600px;
height: 300px;
background: transparent;
border: 1px solid #ededed;
}
#VerticMenu {
margin: 8px auto 20px auto;
position: relative;
width: 400px;
height: 500px;
background: transparent;
border: 1px solid #ededed;
}
#VerticMenu a,
#HorizMenu a {
text-decoration: none;
color: white;
background-color: #dd9;
text-align: left;
border: 1px solid white;
overflow: hidden;
}
#VerticMenu a span,
#HorizMenu a span {
visibility: hidden;
}
.rotateInicio {
background: url(http://.../Dibujos.jpg) left top no-repeat;
}
.rotateAcercade {
background: url(http://.../Paisajes.jpg) left top no-repeat;
}
.rotateAmigos {
background: url(http://.../Artesano.jpg) left top no-repeat;
}
.rotateLinks {
background: url(http://.../Natura.jpg) left top no-repeat;
}
.rotateCosas {
background: url(http://.../Mixtura.jpg) left top no-repeat;
}
.rotateMoo {
background: url(http://.../Fauna.jpg) left top no-repeat;
}
.rotateTrabajos {
background: url(http://.../Lips.png) left top no-repeat;
}
</style>
Podéis cambiar el fondo del rotator, así como los márgenes, además del fondo de las imágenes, y las id de cada sección por las que os convengan más.
.- SCRIPTS:
<script src='http://.../mootools1.2.js' type='text/javascript'/>
<script src='http://.../mooVRotatingMenu.js' type='text/javascript'/>
<script type='text/javascript'>
window.addEvent('domready', function(){
//menu horizontal
var myHorizontalToto = new mooVRotatingMenu($('HorizMenu'), $$('.mooRotate'), {
maxWidth: 250,
maxHeight: 140
});
//menu vertical
var myVerticalToto = new mooVRotatingMenu($('VerticMenu'), $$('.mooRotateV'), {
maxWidth: 250,
maxHeight: 150,
mode: 'vertical',
hPad: 2.8,
vPad: 1.5,
opacity: 0.9,
inertie: 20
});
});
</script>
Como siempre, cambiad en estos scripts lo que queráis: anchos, altos, velocidad...
.- HTML:
.- Menú Horizontal:
<div id='HorizMenu'>
<a class='mooRotate rotateInicio ' href='#'><span>Home</span></a>
<a class='mooRotate rotateMoo ' href='#'><span>Mootools</span></a>
<a class='mooRotate rotateTrabajos ' href='#'><span>Work</span></a>
<a class='mooRotate rotateCosas' href='#'><span>Goodies</span></a>
<a class='mooRotate rotateAmigos' href='#'><span>Friends</span></a>
<a class='mooRotate rotateAcercade' href='#'><span>About</span></a>
</div>
.- Menú Vertical:
<div id='VerticMenu'>
<a class='mooRotateV rotateInicio' href='#'><span>Home</span></a>
<a class='mooRotateV rotateMoo' href='#'><span>Mootools</span></a>
<a class='mooRotateV rotateTrabajos' href='#'><span>Work</span></a>
<a class='mooRotateV rotateCosas' href='#'><span>Goodies</span></a>
<a class='mooRotateV rotateLinks' href='#'><span>Resort</span></a>
<a class='mooRotateV rotateAmigos' href='#'><span>Friends</span></a>
<a class='mooRotateV rotateAcercade' href='#'><span>About</span></a>
</div>
Tened cuidado a la hora de colocar las ID de cada imagen, no sea que no vayan a corresponder con las de CSS.
Y ya está...
Pero que bueno!!!
ResponderEliminarVaya creo que se me ha enviado el comentario anterior sin terminarlo, no sé que ha pasado, cambié de págin y volví y aparecía enviado... :D
ResponderEliminarQuería decir que es espectacular, es como el FLShow pero con Mootools! solo le falta el reflejillo y algunas cosillas pero por contra a este seguramente que se le puede poner un fondo personalizado con una textura metálica o algo así, y veo que permite hasta transparencia!
Y además va rápido, no como otro tipo de galerías que habíamos probado y se atascaban! realmente muy, muy bueno, me lo apunto, seguro que el código ocupa mucho menos que el flash.
Aunque está en Mootools 1.2 no sabrás si los otros scripts que tenemos para 1.1 serían compatibles con la 1.2? es lo único que me preocupa.
Si has visto el menú del hack, puedes ver que con un cambio de fondo la cosa varía sensiblemente... a mí el negro me quedaba fatal, así que no tuve otra que cambiarlo, je.
ResponderEliminarPero sí: con el fondo que te apetezca e imágenes con reflejo, puedes hacer maravillas.
Te has fijado, ¿eh?, que lleva transparencias en los intervalos entre las imágenes.
La pena es... que lo probé con otros Mootools y no se llevan bien. De hecho, fíjate que el autor señala que el script del rotator es para el 1.2
Y éste, si lo dejas con otros Mootools, entran en conflicto.
Chico... no sé cómo no se ponen de acuerdo para hacer compatibles las sub-librerías o versiones que van adelantando dentro de una misma librería. No lo entiendo, la verdad...
Oye, no viene al caso, pero como es algo así como galerías de imágenes también, aunque puede ser un menú, te lo comento aquí... estoy explorando que con MS Office existen programas para exportar las presentaciones de Power Point a SWF!! con lo cual puedes hacer galerías de imágenes, fotos, o incluso navegación de contenido? (creo que en PP se pueden poner links en los objetos no?) y además como es un programa facil de manejar o que ya sabemos...
ResponderEliminarY siguiendo con esto, como actualmente todavía no he instalado una suite ofimática, estaba viendo Open Office, y fijate que tiene la opción de exportar directamente a SWF sin programas externos! e incluso por ahí leía la forma de incluir música y tal al objeto flash.
Es una posibilidad interesantísima si ya tienes un programa de estos instalados lo cual es muy normal! y Open Office encima es gratuito!
Tengo el Office... pero apenas lo uso. De hecho, la mitad no sé ni para qué sirve, je. Para trabajar siempre me ha llegado con el Word y una hoja de cálculo.
ResponderEliminarMiedo me da todo lo qe me comentas, porque... ¡yo creía que ya me faltaba menos por saber!
(Yo me jubilo ya mismo, te lo prometo)