Aprietar Boton y que aparesca una Imagen

ElMota · #1 (**permalink**) 11/08/2012, 15:02

como hacer para que al aprietar un Boton aparesca una imagen ?

furoya · #2 (**permalink**) 11/08/2012, 17:56

Con varios lenguajes de programación. También se puede con CSS, pero tiene más limitaciones, y como no estás explicando nada de lo que quieres hacer, lo mejor es no usarlo por las dudas.

Te recomendaría javascript, para mover el tema a ese foro. Pero si no sabes ni lo más mínimo de JS te sugiero que antes leas algún tutorial. Es más, después de leerlo, ni vas a necesitar que te respondan.

ElMota · #3 (**permalink**) 11/08/2012, 17:58

Algun Tuto en español ? c:

pedgarc · #4 (**permalink**) 11/08/2012, 18:25

Hola qué tal, puedes hacerlo con javascript por ejemplo.

Primero tienes que crear un botón y un div donde aparecerá la imagen, después con javascript detectamos el evento y mostramos la imagen.

Código PHP:

  <html>
<head>
<title>Ejemplo</title>
</head>
<body>

<script type="text/javascript" language="javascript">
function mostrar_imagen(id) {
   img = document.getElementById(id);
   img.innerHTML = '<img src="http://static.php.net/www.php.net/images/php.gif" />';
}

function ocultar_imagen(id) {
    img = document.getElementById(id);
    img.innerHTML = '';
}
</script>

<input type="button" value="Mostrar imagen" onClick="javascript:mostrar_imagen('imagen')" />
<input type="button" value="Ocultar imagen" onClick="javascript:ocultar_imagen('imagen')" />
<br />
<div id="imagen">
</div>

</body>
</html>

Prueba éste código y cuéntanos como te fue.

Saludos!

furoya · #5 (**permalink**) 11/08/2012, 18:38

Por acá recomiendan mucho

http://www.librosweb.es/javascript/

Pero la verdad es que yo no lo leí. Cualquier problema ... le reclamas al Foro.

Te diría que te concentres en los eventos (como onclick, que te va a servir para saber que picaron el botón y así después apareces la imagen), en referencias a elementos de la página (como getElementById(), que te puede servir para apuntar al id de la imagen que esté oculta y quieres aparecer), a DOM y nodos (por si quieres crear la imagen "de la nada"), y al cambio de propiedades y valores CSS a través de JS (los nombres a veces no se escriben igual en CSS que en JS).

Hay una serie de ejercicios, que no son para imágenes sino para bloques de texto, pero la mecánica es la misma. Van del 12 al 14 (pasando por el 13).

Cuando lo tengas nos muestras cómo quedó.

[edit]

Bueno, mientras te revisaba el manual, apareció un buey corneta que se hizo destacar.

Lindo lo tuyo, pedgarc. Habría un par de objeciones al código, pero seguramente nuestro amigo ElMota las va a resolver cuando estudie un poco de JS.

[/edit]

ElMota · #6 (**permalink**) 12/08/2012, 08:50

Gracias a los 2 :) ire a ver ahora mismo el tuto en español, pedgarc, veo que no es tan dificil es como el LUA en las funciones GUI :)

ElMota · #7 (**permalink**) 12/08/2012, 10:20

Código HTML:

<!doctype html>
<html>
<head>
<title>PGS BaseMode</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="imagetoolbar" content="no">
<meta http-equiv="imagetoolbar" content="false">
<meta name="generator" content="LMSOFT Web Creator Pro, Version:6.0.0.6">
<meta http-equiv="X-UA-Compatible" content="IE=9">
<link href="./lmwcglobal.css" rel="stylesheet" type="text/css">
<link href="index.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="./jquery/jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="./jquery/jquery-ui-1.8.11.custom.min.js"></script>
<link rel="stylesheet" href="./jquery/themes/base/jquery.ui.all.css" type="text/css" media="all" />
<script type="text/javascript" src="./jquery/LMCenterInWindow.js"></script>

<script type="text/javascript" src="./lmpres90.js"></script><noscript></noscript>



</head>

<body style="margin-Left:0px;margin-Top:0px;margin-Bottom:0px;margin-Right:0px; background-color:#000000;">

<DIV class="cLinkHidden">
<a href="http://www.game-state.eu/74.91.27.12:2015/FFFFFF/00FF55/430x73.png" title=""></a><br>
<a href="http://mirror.multitheftauto.com/mtasa/main/mtasa-1.3.exe" title=""></a><br>
</DIV>

<div id='Page'>
   <div id='Flash1'>
   <OBJECT ID='Flash1Embed' 
   classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
   CODEBASE="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0"
   LEFT=0
   TOP=0
   WIDTH=964
   HEIGHT=1797
   standby="Loading FLASH Player components...">
   <PARAM NAME="SRC" value="./animations/crosshair.swf">
   <PARAM NAME="PLAY" value="true">
   <PARAM NAME="LOOP" value="true">
   <PARAM NAME="MENU" value="false">
   <PARAM NAME="QUALITY" value="High">
   <PARAM NAME="SCALE" value="NoBorder">
   <PARAM NAME="WMODE" value="Transparent">
   <Embed type="application/x-shockwave-flash" 
   pluginspage="http://www.macromedia.com/shockwave/download/" 
   src="./animations/crosshair.swf" 
   Name='Flash1Embed' 
   LEFT=0 
   TOP=0 
   WIDTH=964 
   HEIGHT=1797 
   QUALITY=High 
   SCALE=NoBorder 
   WMODE=Transparent 
   PLAY=True 
   LOOP=True 
   MENU=False >
   </embed>
   </OBJECT>
   </div>
   <div id='But3' class='Up'><p></p><div id='lBut3Up'>Ver Servers</div></div>
   <div id='Box4'></div>
   <div id='Box3'></div>
   <div id='Img1'>
      <img id='Img1Inner' src='./images/mohsoldier.png' alt="" />
   </div>
   <div id='Text1'>
      <p style="line-height:0;text-align:left">&nbsp;&nbsp;</p>
   </div>
   <div id='Text2'>
      <p style="line-height:0;text-align:center"><font face="Georgia" color="#00ffff"><span style="font-size:32pt;line-height:48px;">PGS BaseMode Server</span></font></p>
   </div>
   <div id='Box1'>
      <div id='But1' class='Up'><p></p><div id='lBut1Up'>Ir al Foro</div></div>
      <div id='Text4'>
         <p style="line-height:0;text-align:center"><font face="Arial"><span style="font-size:10pt;line-height:15px;">Copyright 2012 (c) by ElMota</span></font></p>
      </div>
   </div>
   <div id='Box5'>
      <div id='Img3'>
         <img id='Img3Inner' src='http://www.game-state.eu/94.23.83.155:11812/FFFFFF/6FFF00/430x73.png' alt="" />
      </div>
      <div id='Img2'>
         <img id='Img2Inner' src='http://www.game-state.eu/74.91.27.12:2015/FFFFFF/00FF55/430x73.png' alt="" />
      </div>
      <div id='Img4'>
         <img id='Img4Inner' src='http://www.game-state.eu/37.59.135.204:10889/FFFFFF/FF9900/430x73.png' alt="" />
      </div>
      <div id='But4' class='Up'><p></p><div id='lBut4Up'>Ocultar</div></div>
   </div>
   <div id='Box2'>
      <div id='Text3'>
         <p style="line-height:0;text-align:center"><font face="Arial"><span style="font-size:10pt;line-height:15px;"><b>Armas - Diversion -&nbsp; PGS BaseMode - Skins - Webeo</b></span></font></p>
      </div>
   </div>
   <div id='But2' class='Up'><p></p><div id='lBut2Up'>No tienes MTA ? Descargalo Aqui !</div></div>
   <script type="text/javascript" src="./index.js"></script>
   <noscript></noscript>
</div>
</body>
</html>

no entiendo como destruirla :/, ya voy a la mitad del tuto :)

enaguimar · #8 (**permalink**) 13/08/2012, 06:15

Compañero te dejo unos recursos.

http://www.araudi.net/

furoya · #9 (**permalink**) 13/08/2012, 07:53

ElMota : ¿qué sería "destruirla" ? ¿también hay que borrarla?

agami : a la fecha llevas tres 'mugrosos' mensajes sin aportar nada más que un pedido de algo que ya se explicó mil veces, y para lo único que vienes acá es para reirte de un error gramático?

Bueno, vamos a suponer que tituló de otra forma, se arrepintió, y al editar el párrafo se le quedó una parte de otro modo, tiempo o persona de verbo. Si no, lo tenemos que echar a diccionariazos.

ElMota · #10 (**permalink**) 13/08/2012, 18:21

D: es porque he estado ocupado,

function borrarDiv() {
---- ?
}
function MostrarDiv(){
<div id='Box5'>
<div id='Img3'>
<img id='Img3Inner' src='http://www.game-state.eu/94.23.83.155:11812/FFFFFF/6FFF00/430x73.png' alt="" />
</div>
<div id='Img2'>
<img id='Img2Inner' src='http://www.game-state.eu/74.91.27.12:2015/FFFFFF/00FF55/430x73.png' alt="" />
</div>
<div id='Img4'>
<img id='Img4Inner' src='http://www.game-state.eu/37.59.135.204:10889/FFFFFF/FF9900/430x73.png' alt="" />
</div>
<div id='But4' class='Up'><p></p><div id='lBut4Up'>Ocultar</div></div>
</div>
}

//con este buton quiero que se cierre D: <div id='But4' class='Up'><p></p><div id='lBut4Up'>Ocultar</div></div>

//y con este que se abra : <div id='But3' class='Up'><p></p><div id='lBut3Up'>Ver Servers</div></div>

furoya · #11 (**permalink**) 23/09/2012, 13:36

Perdón : ¿no era que ya no podíamos eliminar nuestros mensajes?. ¿Qué pasó con el post de agami? ¿Otra vez hablo con fantasmas?

De tu ejemplo prefiero no hacer comentarios, ElMota.