Foros del Web » Programando para Internet » Javascript »

Problema "Botones de indicación de navegación "

Estas en el tema de Problema "Botones de indicación de navegación " en el foro de Javascript en Foros del Web. Hola foreros: En primer lugar presentarme y felicitaros a los creadores y usuarios poe este foro. Vaya si aprende uno por aquí. Además buen rollo. ...
  #1 (permalink)  
Antiguo 30/05/2004, 09:49
Usuario no validado
 
Fecha de Ingreso: mayo-2004
Mensajes: 41
Antigüedad: 20 años, 5 meses
Puntos: 0
Pregunta Problema "Botones de indicación de navegación "

Hola foreros:
En primer lugar presentarme y felicitaros a los creadores y usuarios poe este foro. Vaya si aprende uno por aquí. Además buen rollo. Lo dicho felicidades.

He seguido varias de vuestras recomendaciones para poder visionar fotos que tengo colgadas y no logro conseguirlo. Unas veces por que no entiendo (soy un neofito en el tema) y otras por que sois más avanzados y utilizais terminologia que no cocnozco y hace que dee de leer post por error.

Básicamente me he guiado por la fqa 126 del maestro Karlankas, pero lamentablemente no me sale bien.

http://www.forosdelweb.com/f13/faqs-javascript-105325-post375850/

Como no sé utilizar bien la terminología voy a intentar ilustrar que es lo que necesito y si me podeis ayudar.

Si visitas, por ejemplo, la web esta y eleges un modelo de coche te sale una "ventanita", puedes elegir la foto que quieres.

http://www.vmautomoviles.com/index.p...ostrar_coches#

Sin embargo en mi web me he tenido que limitar a hacer una chapuza que no me gusta:

http://morgan007.webcindario.com/Pagina2.htm

Al grano: Preguntas

1.- En mi web se abre una ventana por foto y prefiero hacerlo como en esa web que he puesto de ejemplo. ¿Me puede decir alguien como hacerlo? Despues de siguer los pasos anteriores no he logrado nada.

2.- Además no entiendo por qué mis fotos siendo de mayor peso e igual calidad se ven tan mal. ¿me podeis aconsejar sobre cómo he de colocar las fotos o las característica de las mismas?

Saludos y muchas gracias.

Morgan007
  #2 (permalink)  
Antiguo 30/05/2004, 10:07
Avatar de JavierB
Colaborador
 
Fecha de Ingreso: febrero-2002
Ubicación: Madrid
Mensajes: 25.052
Antigüedad: 22 años, 9 meses
Puntos: 772
Hola, Morgan007. Bienvenido al Foro.

Te contesto a la primera pregunta. Pon los enlaces así:

<a href="#" onclick="v=window.open('http://morgan007.webcindario.com/11.jpg','ve');v.focus();return false">VER FOTO AMPLIADA</a>

Espero que te sirva. Saludos,
  #3 (permalink)  
Antiguo 30/05/2004, 10:26
Usuario no validado
 
Fecha de Ingreso: mayo-2004
Mensajes: 41
Antigüedad: 20 años, 5 meses
Puntos: 0
Perdona. Acabo de probarlo y no me sale bien. Posiblemente no he insertado bien la "orden". Entiendo que yo primero cargo las imagenes y les doy un tamaño pequeño y lego lo referencia como tu me dices? ¿Puedes ampliarme información?. Dónde se supone que he de sustituir los enlaces?? Perdona que sea tan poco claro en mis explicaciones pero soy bastante neofito.

Hay algo que no hago bien.

Muchas gracias JavierB.

Un saludo
  #4 (permalink)  
Antiguo 30/05/2004, 11:14
Avatar de JavierB
Colaborador
 
Fecha de Ingreso: febrero-2002
Ubicación: Madrid
Mensajes: 25.052
Antigüedad: 22 años, 9 meses
Puntos: 772
Hola de nuevo.

En tu página tienes unos enlaces más o menos así:

<a href='http://morgan007.webcindario.com/11.jpg'>VER FOTO AMPLIADA</a>

La idea es ponerlos como te dije en mi anterior mensaje, cambiando la dirección de la imágen que va dentro del window.open:

window.open('http://morgan007.webcindario.com/11.jpg'...

De esta forma cuando pulses la primera vez se abrirá una ventana con la foto (al menos eso espero) y las siguientes veces que pulses se abrirán las fotos en la misma ventana. Así evitas tener un montón de pop-up abiertos.

Si sigues teniendo dudas, no dudes en seguir preguntando. Saludos,
  #5 (permalink)  
Antiguo 30/05/2004, 11:19
Usuario no validado
 
Fecha de Ingreso: mayo-2004
Mensajes: 41
Antigüedad: 20 años, 5 meses
Puntos: 0
Ok Javier. Ahora si que me funciona. No lo había puesto bien al principio. Vamos superándonos.

Ahora, para conseguir que se vean las fotos pequeñas y conforme voy situando el cursor se vean en grande (como en la web que he puesto de ejemplo) ¿qué he de poner? eso es lo que tambien he intentado siguiendo la faq 126 y no he sabido hacerlo tampoco.

Saludos y muchas gracias por tu interés y tu paciencia.
Morgan007
  #6 (permalink)  
Antiguo 31/05/2004, 02:20
Avatar de JavierB
Colaborador
 
Fecha de Ingreso: febrero-2002
Ubicación: Madrid
Mensajes: 25.052
Antigüedad: 22 años, 9 meses
Puntos: 772
Hola de nuevo.

Lo de las imágenes pequeñas, me ha parecido ver que utilizan la misma imágen, pero le dan distinto tamaño con html. Algo parecido a esto:
Código PHP:
<img id="afoto" src="imagen1.gif" width="176" height="62"/> 
<
img src="imagen1.gif" width="88" height="31"
onmouseover="document.getElementById('afoto').src=this.src"/> 
<
img src="imagen2.gif" width="88" height="31"
onmouseover="document.getElementById('afoto').src=this.src"/> 
Saludos,
  #7 (permalink)  
Antiguo 31/05/2004, 06:22
Usuario no validado
 
Fecha de Ingreso: mayo-2004
Mensajes: 41
Antigüedad: 20 años, 5 meses
Puntos: 0
Hum... probaré a ver que me sale. Muchas gracias de nuevo.

Saludos Morgan007
  #8 (permalink)  
Antiguo 31/05/2004, 12:27
Usuario no validado
 
Fecha de Ingreso: mayo-2004
Mensajes: 41
Antigüedad: 20 años, 5 meses
Puntos: 0
He logrado montar esto pero algo falla. Resulta que cuando ejecuto el *.html que incluye lo de abajo sale bien.

Y se ve en grande la foto "31" y el resto en pequño bajo. Cuando posiciono el ratón en otra foto ...sale mal la foto.

¿Dónde esta el fallo?.

Muchas gracias

Saludos Morgan007

<quote>
<html>
<head>
<script language="JavaScript1.2" src="js/utils.js"></script>
<script>
function set_foto(nom_foto)
{
var hid=document.getElementById("foto_coche");
if ( hid ) {
hid.src="images/"+nom_foto;
if ( !hid.complete )
setTimeout("set_foto('"+nom_foto+"')", 1000);

}
}
</script>
<style>
body, div,table,td,th,input,select,textarea,file {
font-family: Arial, Verdana, sans-serif;
font-size: 9pt;
}
h1 {
font-family: Times, Verdana, sans-serif;
font-size: 14pt;
text-align: center;
background: #a9a;
}
a {
text-decoration: none;
color: #e02817;
font-weight: bold;
}
a:hover {
text-decoration: none;
color: #000000;
font-weight: bold;
}
</style>

<title></title>

</head>
<body style="background-color: #ffffff;">

<h1>MB ML 270CDI COMAND + PIEL+ XENON</h1>
<table>
<tr>
<td>
<img id="foto_coche" src="image_31.jpg" border="0" width="400" align="left">
</td>
<td align="left">
<table>
<tr>
<th style="text-align: right" width="15%">Marca:</td><td width="15%"> MB&nbsp;Mercedes Benz 270CDI</td>
</tr>
<tr>
<th style="text-align: right" width="15%">Modelo:</td><td width="15%">270 CDI</td>
</tr>
<tr>
<th style="text-align: right" width="15%">Color:</td><td width="15%">Negro Obsidiana</td>
</tr>
<tr>
<th style="text-align: right" width="15%">Motor:</td><td width="15%">2.7CDI</td>
</tr>
</table>
<br>
<table>
<tr>
<td colspan="2" valign="top"><fieldset style="width: 100%"><legend style="color: #666666; font-weight: bold">PERFIL</legend>KLIMA+ PIEL+ CAMBIO AUTOMATICO TRIPTONIC + COMAND + CRISTALES TINTADOS+ ESPEJOS ABATIBLES+ ABS+ ESP+ CARGADOR 10 CD</fieldset>
</td>
</tr>
<tr>
<td align="left"><span style="font-weight: bold; font-family: Arial; font-size: 9pt; color: #666666">TELE-ATLAS DX</span></td>
<td align="right">
<span style="font-weight: bold; font-family: Arial; font-size: 9pt; color: #666666">
MIEMBRO MBFAQ.COM</td>
</tr>
<tr>
<td align="left"><a href="#" onclick="self.close()">[cerrar]</a></td>
<td align="right"><a href="#" onclick="print()">[imprimir]</a></td>
</tr>
</table>
</td>
</tr>
</table>
<p>
<fieldset>
<legend>Coloque el ratón sobre cada foto para agrandarla</legend>

<img src="image_31.jpg" WIDTH=150 HEIGTH=150style="border: 1px white solid" onmouseover="set_foto('image_31.jpg'); this.style.border='1px blue solid';" onmouseout="this.style.borderColor='white';" >
&nbsp;

<img src="image_33.jpg" WIDTH=150 HEIGTH=150 style="border: 1px white solid" onmouseover="set_foto('image_33.jpg'); this.style.border='1px blue solid';" onmouseout="this.style.borderColor='white';" >
&nbsp;

<img src="image_34.jpg" WIDTH=150 HEIGTH=150 style="border: 1px white solid" onmouseover="set_foto('img_34.jpg'); this.style.border='1px blue solid';" onmouseout="this.style.borderColor='white';" >
&nbsp;

<img src="image_35.jpg" WIDTH=150 HEIGTH=150 style="border: 1px white solid" onmouseover="set_foto('image_35.jpg'); this.style.border='1px blue solid';" onmouseout="this.style.borderColor='white';" >
&nbsp;

<img src="image_37.jpg" WIDTH=150 HEIGTH=150 style="border: 1px white solid" onmouseover="set_foto('image_37.jpg'); this.style.border='1px blue solid';" onmouseout="this.style.borderColor='white';" >
&nbsp;

</fieldset>


</body>
</html>
</quote>
  #9 (permalink)  
Antiguo 01/06/2004, 02:21
Usuario no validado
 
Fecha de Ingreso: mayo-2004
Mensajes: 41
Antigüedad: 20 años, 5 meses
Puntos: 0
Contesto yo mismo por si a alguien le puede servir. Me han ayudado por otro lado pero quería dejar mi aportación aquí.

Cuando posicionno el raton en una de las imagenes de abajo en la imagen de arriba no salía nada porque tenía un fallo en el javascript en esta linea:

hid.src="images/"+nom_foto;

Lo correcto era....

hid.src=nom_foto;

ya que las imagenes estan en el mismo directorio que el html (segun se deduce de las lineas del final de la pagina) y la linea de javascript erronea las busca en un directorio llamado "images"

Ademas había un error en la foto 34, (mal puesto el nombre de la imagen en la funcion set_foto).

Saludos y espero sea de utilidad.

Morgan007
  #10 (permalink)  
Antiguo 01/06/2004, 10:47
Usuario no validado
 
Fecha de Ingreso: mayo-2004
Mensajes: 41
Antigüedad: 20 años, 5 meses
Puntos: 0
Vistame y mira como funciona. Saludos

www.morgan007.tk
  #11 (permalink)  
Antiguo 01/06/2004, 11:00
Avatar de JavierB
Colaborador
 
Fecha de Ingreso: febrero-2002
Ubicación: Madrid
Mensajes: 25.052
Antigüedad: 22 años, 9 meses
Puntos: 772
Hola, Morgan007.

El fallo que le veo es que al ser las fotos de distintos tamaños, cuando vas poniendo el ratón encima va dando unos saltos un poco desagradables. Deberías buscar alguna solución, quizás metiendo la foto grande dentro de un <div> y dandole el tamaño adecuado.

Saludos,
  #12 (permalink)  
Antiguo 04/06/2004, 05:53
Usuario no validado
 
Fecha de Ingreso: mayo-2004
Mensajes: 41
Antigüedad: 20 años, 5 meses
Puntos: 0
Gracias Javier B. Intentaré solucionarlo. He realizado varias pruebas con tamaños y calidad de fotos y me ha ido fatal. Por eso las había dejado así.

Saludos

Morgan007
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 18:32.