Búsqueda en el Foro:
Buscar


Autor Mensaje
Mensaje12-12-2012, 01:38 (UTC)    
Título del mensaje: [Resuelto] Busco un codigo

Estoy haciendo unos arreglos en mi web y necesito un codigo:

Quiero hacer que al dar click a una imagen, aparesca otra debajo sin que la de arriba desaparesca. Lo necesito para hacer mi recetario y no hacer tantas subpaginas.

De antemano gracias por su ayuda y si no se puede solo diganlo e intentare otra cosa.
______________


Ultima edición por kawaiikingdom el Jue Ene 10, 2013 7:33 pm; editado 1 vez
Mensaje12-12-2012, 09:09 (UTC)    
Título del mensaje:

pues yo tengo este codigo. puedes usarlo mientras encuentras algo mejor

lo que hace es que al pasar el mouse muestra la imagen inferior y al dar click la imagen queda fija. Lo malo es que solo se puede con dos imagenes (o dos div's ya que solo importa que agregues las class'es)


ok este es el css, es desde donde editaras el ancho y alto (width & height ) tambien puedes quitarle los bordes (la linea border:1px solid magenta;) ya que solo enta de ejemplo

Código:
<style type='text/css'>
.ico {
width:32px; height:32px;
border:1px solid magenta;
margin-left:auto;
margin-right:auto;
text-align:left;
}

.fb-icon-content {
width:200px; height:200px;
border:1px solid magenta;
position:static;
display:none;
text-align:left;
}
</style>


este es el codigo. le dice que al navegador que cuando pases el mouse sobre la imagen (marcada con class="ico") muestre la imagen inferior (marcada con class="fb-icon-content") si el usuario no le da click desaparece pero si lo hace se queda fijada. Este codigo utiliza jquery. si ya lo tienes elimina la 1ra linea
Código:
<script type='text/javascript' src='http://code.jquery.com/jquery-1.7.1.js'></script>
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
var shown = false;

$(".ico").hover( function() {
    if ( shown === false ) {
        var that = $(this),
            offset = that.offset(),
            tooltipElement = $(".fb-icon-content");
           
        tooltipElement.css({
            top: offset.top + that.height() + 10,
            left: offset.left + that.width()/2 - tooltipElement.width()/2
        }).show();
    }
}, function() {
    if ( shown === false ) {   
        $(".fb-icon-content").hide();
    }
}).bind('click', function() {
    var tooltipElement = $(".fb-icon-content"),
        that = $(this);
   
    if ( shown === that.index() ) {
        tooltipElement.hide();
        shown = false;
    } else {
        shown = $(this).index();
       
        var that = $(this),
            offset = that.offset(),
            tooltipElement = $(".fb-icon-content");
           
        tooltipElement.css({
            top: offset.top + that.height() + 10,
            left: offset.left + that.width()/2 - tooltipElement.width()/2
        }).show();
    }
});
});//]]> 
</script>


este es el codigo de las imagenes ya sabes, agregale las url's en los simbolos #
Código:
<center>
<img class="ico" src="#" /><br />
<img class="fb-icon-content" src="#" />
</center>

______________
Mensaje12-12-2012, 23:34 (UTC)    
Título del mensaje:

Muchisimas gracias, me funciona de maravilla !!

Por cierto, si no es molesita ¿Me puedes ayudar con este codigo? Hace que al darle click a una imagen, se cambie por otra.
¿Podrias decirme si se puede modificar para que al volver a darle click aparesca la primera imagen?

Por favor, lo necesito para una sección en mis paginas ocultas

Cita:
<script type="text/javascript">
<!--
function FP_preloadImgs() {//v1.0
var d=document,a=arguments; if(!d.FP_imgs) d.FP_imgs=new Array();
for(var i=0; i<a.length; i++) { d.FP_imgs[i]=new Image; d.FP_imgs[i].src=a[i]; }
}
function FP_swapImg() {//v1.0
var doc=document,args=arguments,elm,n; doc.$imgSwaps=new Array(); for(n=2; n<args.length;
n+=2) { elm=FP_getObjectByID(args[n]); if(elm) { doc.$imgSwaps[doc.$imgSwaps.length]=elm;
elm.$src=elm.src; elm.src=args[n+1]; } }
}

function FP_getObjectByID(id,o) {//v1.0
var c,el,els,f,m,n; if(!o)o=document; if(o.getElementById) el=o.getElementById(id);
else if(o.layers) c=o.layers; else if(o.all) el=o.all[id]; if(el) return el;
if(o.id==id || o.name==id) return o; if(o.childNodes) c=o.childNodes; if(c)
for(n=0; n<c.length; n++) { el=FP_getObjectByID(id,c[n]); if(el) return el; }
f=o.forms; if(f) for(n=0; n<f.length; n++) { els=f[n].elements;
for(m=0; m<els.length; m++){ el=FP_getObjectByID(id,els[n]); if(el) return el; } }
return null;
}
// -->
</script> <img onclick="FP_swapImg(1,1,/*id*/'img1',/*url*/'http://img.webme.com/pic/k/kawaiikingdom/rainbowcupcakes.png')" src="http://img.webme.com/pic/k/kawaiikingdom/rainbowcupcakest.png" id="img1" alt="" />


Muchas gracias por tu ayuda
______________


Ultima edición por kawaiikingdom el Mie Dic 12, 2012 7:35 pm; editado 1 vez
Mensaje13-12-2012, 10:38 (UTC)    
Título del mensaje:

kawaiikingdom escribió:
Muchisimas gracias, me funciona de maravilla !!

Por cierto, si no es molesita ¿Me puedes ayudar con este codigo? Hace que al darle click a una imagen, se cambie por otra.
¿Podrias decirme si se puede modificar para que al volver a darle click aparesca la primera imagen?

Por favor, lo necesito para una sección en mis paginas ocultas

Cita:
...


Muchas gracias por tu ayuda


La persona que me ayudaba con javascript ya no se comunica conmigo por eso no pude editar tu codigo. Pero intenta con este
Cita:
<script>
cc=0;
function changeimage()
{
if (cc==0)
{
cc=1;
document.getElementById('mireceta').src="http://img.webme.com/pic/k/kawaiikingdom/rainbowcupcakes.png";
}
else
{
cc=0;
document.getElementById('mireceta').src="http://img.webme.com/pic/k/kawaiikingdom/rainbowcupcakest.png";
}
}
</script>
<img id="mireceta" onclick="changeimage()" border="0" src="http://img.webme.com/pic/k/kawaiikingdom/rainbowcupcakest.png" />
es el codigo de las luces de W3schools Link

descripcion de los colores
verde es la primera imagen
azul es la segunda (si observas va 2 veces)
marron (o cafe) [5 zonas] estas zonas son opcionales. si vas a agregar este codigo varias veces en una pagina deben ser editados agregandoles un numero o letra al final. Aqui te dejo un ejemplo con este codigo 3 veces
http://pastebin.com/m3A1i4uJ
______________


Ultima edición por darknet13 el Jue Dic 13, 2012 6:40 am; editado 1 vez
Mensaje13-12-2012, 21:41 (UTC)    
Título del mensaje:

Muchisimas gracias me han sido de muchisima ayuda los codigos.
Mil gracias por ayudarme !!
______________
Mensaje30-12-2012, 11:11 (UTC)    
Título del mensaje:

gracias muy buen aporte
Mostrar mensajes anteriores:   


Powered by phpBB © 2001, 2005 phpBB Group