Ayuda para modificar un script sensillo

K3NNY · #1 (**permalink**) 05/04/2004, 23:47

Wenas, antes que nada, gracias por querer ayudar.

Navegando encontre este sensillo script y necesitaria hacerle un pequeño cambio, pero no tengo mucha idea de como hacerlo. Espero me puedan ayudar:
Aca les dejo el script ya armado en una web para que lo vean andando:

<html>
<head>
<style type="text/css">
.dropcontent{
width: 300px;
height: 140px;
border: 1px solid black;
background-color: #FFECC6;
display:block;
}
</style>

<script type="text/javascript">

/*
Combo-Box Viewer script- Created by and © Dynamicdrive.com
Visit http://www.dynamicdrive.com/ for this script and more
This notice MUST stay intact for legal use
*/

if (document.getElementById){
document.write('<style type="text/css">\n')
document.write('.dropcontent{display:none;}\n')
document.write('</style>\n')
}

function contractall(){
if (document.getElementById){
var inc=0
while (document.getElementById("dropmsg"+inc)){
document.getElementById("dropmsg"+inc).style.displ ay="none"
inc++
}
}
}

function expandone(){
if (document.getElementById){
var selectedItem=document.dropmsgform.dropmsgoption.se lectedIndex
contractall()
document.getElementById("dropmsg"+selectedItem).st yle.display="block"
}
}

if (window.addEventListener)
window.addEventListener("load", expandone, false)
else if (window.attachEvent)
window.attachEvent("onload", expandone)

</script>
</head>
<body>
<img src="opcion1.gif" onmouseclick="expandone()"> <img src="opcion2.gif"> <img src="opcion3.gif">
<form name="dropmsgform">
<select name="dropmsgoption" size="1" style="width:300" onChange="expandone()">
<option selected>What is JavaScript?</option>
<option>Difference betwen Java and JavaScript</option>
<option>What is DHTML?</option>
</select>
<br>

<div id="dropmsg0" class="dropcontent">
JavaScript is a scripting language originally developed by Netscape to add interactivity and power to web documents. It is purely client side, and runs completely on the client's browser and computer.
</div>

<div id="dropmsg1" class="dropcontent">
Java is completely different from JavaScript- it's more powerful, more complex, and unfortunately, a lot harder to master. It belongs in the same league as C, C++, and other more complex languages. Java programs need to be compiled before they can run, while JavaScript do not.
</div>

<div id="dropmsg2" class="dropcontent">
DHTML is the embodiment of a combination of technologies- JavaScript, CSS, and HTML. Through them a new level of interactivity is possible for the end user experience.
</div>

</form>
</body>
</html>

Lo que yo necesito es que se cambie no por el menu desplegable sino al hacer click en distintas imagenes (una por opcion). Cosa que al hacer click en una imagen cambie el contenido del DIV.

Muchas gracias de antemano por su ayuda...

caricatos · #2 (**permalink**) 06/04/2004, 01:17

Hola K3NNY:

Una opción es definir en las imagenes una función con un parámetro que se corresponda con el número de la capa (podría ser el mismo expandone y modificar éste para que actúe según ese parámetro:

function expandone(n){
if (document.getElementById){
contractall()
document.getElementById("dropmsg"+n).style.display ="block"
}
}

y la imagen:

<src src="imagen0.gif" name="imagen0" onclick="expandone(0)" />

Saludos

K3NNY · #3 (**permalink**) 06/04/2004, 12:02

Caricatos gracias por responder.

Antes que nada, en el codigo que di arriba, la siguiente linea no iva:
<img src="opcion1.gif" onmouseclick="expandone()"> <img src="opcion2.gif"> <img src="opcion3.gif">

Bueno, lei lo que me pusiste y reemplace la funcion "expandone(n)" y agregue las imagenes (corregi los del "src src" y la barra de mas). Y funciona. Pero saltan unos pequeños inconvenientes:

1) Me dice que hay un error en la linea 41, que vendria a ser esta linea de la nueva funcion "expandone(n)" que de diste vos:

document.getElementById("dropmsg"+n).style.display ="block"

Me dice: "se requiere un objeto".

2) Otra cosa que cambio es que de entrada, osea, cuando recien carga la pagina, no me muestra ningun bloque, tengo que hacer click en una imagen para que me muestre uno. Eso no importaria en principio, pero si llegas a ver donde se perdio esa parte mejor.

Alguna idea de porque pasan esas cosas?

Gracias de nuevo

Jezebel · #4 (**permalink**) 07/04/2004, 14:44

HEY, a mi tambien me serviria este scritp, alguien sabe como arrreglarlo?????????

caricatos · #5 (**permalink**) 07/04/2004, 17:14

Hola otra vez:

Un error que veo es que no existe onmouseclick sino onclick...

He borrado estas líneas y va mejor:
if (window.addEventListener)
window.addEventListener("load", expandone, false)
else if (window.attachEvent)
window.attachEvent("onload", expandone)

Saludos

K3NNY · #6 (**permalink**) 07/04/2004, 18:39

Jeje, lo del OnMouseClick fue un invento mio, que me olvide de borrar cuando copie el codigo en el foro. Como dije se bien poco y nada de javascript.

Perfecto, funciona de mil maravillas. Excepto lo de mostrar el BLOCK de entrada pero como dije no es critico que eso funcione.

Ahora, si todavia estas interesado, te tengo una ultima propuesta. Esta es un poco mas dificil:

La idea es que hayan 2 blockes, en distintos lugares de la pagina. (mas especificamente en distintas celdas de una tabla). De manera que al hacer click en una imagen cambien dos bloques. Estas interesado?