Iniciar sesiónCerrar
Correo:
Contraseña:
Entrar
Recordar sesión en este navegador
Iniciar sesiónIniciar sesiónCrear cuentaCrear cuenta
LWP » Foros » JavaScript » Ruta relativa no funciona

JavaScript - Ruta relativa no funciona

Volver
Nuevo Tema
<<>>
 
Vista:
Imágen de perfil de Alejandro

Ruta relativa no funciona

Publicado por Alejandro (2 intervenciones) el 07/09/2022 19:24:36
Hola a todos,

después de algunos días intentando resolver este problema, decidí escribir acá, esperando que quizás alguien pueda orientarme.

En el código a continuación (uso Dreamweaver), al pasar el mouse por encima del nombre del archivo aparece una miniatura de la imagen (con lo cual asumo que obviamente encuentra la imagen).

Pero al hacer un preview de la página en Chrome (o subirla al servidor y ejecutarla desde ahí) no reconoce más la imagen, a menos que reemplace la ruta por una absoluta, y an así, debe ser en la web (por ej,, en vez de
1
if (document.getElementById("menu1").src == "images/04A.jpg")
, para que la encuentre tengo que poner
1
if (document.getElementById("menu1").src == "https://www.rutaenlaweb/images/04A.jpg"){

El código (simplificado) con el cual intento resolver esto es el siguiente:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Hover test</title>
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
    function topMenu1HoverIn(elemento){
       if (document.getElementById("menu1").src == "images/04A.jpg"){
            document.getElementById("menu1").src = "images/04B.jpg";
        }
    }
 
    function topMenu1HoverOut(elemento){
       if (document.getElementById("menu1").src == "images/04B.jpg"){
            document.getElementById("menu1").src = "images/04A.jpg";
        }
    }
</script>
 
</head>
 
<body>
 
    <div class = "test">
 
        <a href="https://www.google.com/" target="_blank">
            <img id="menu1" src="images/04A.jpg"
                 onMouseOver="topMenu1HoverIn(this); this.style.cursor='pointer';"
                 onMouseOut="topMenu1HoverOut(this); this.style.cursor='none';"
                 alt="">
        </a>
 
    </div>
</body>
</html>

Desde ya, muchísimas gracias, y perdón por las molestias!
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de d4redevilx
Val: 477
Bronce
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

Ruta relativa no funciona

Publicado por d4redevilx (130 intervenciones) el 07/09/2022 20:05:46
Hola Alejandro.
El atributo src siempre devuelve la URL completa, incluido el protocolo (como http://, https://, etc).
Una solución, sería fragmentar la url en partes y tomar únicamente el nombre del archivo al que apunta y validar contra este.

Hice unas modificaciones en tu código, te dejo enlaces para que estudies los métodos de strings que utilice para resolverlo.

https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/String/lastIndexOf
https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/String/substring

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<!doctype html>
<html>
 
<head>
    <meta charset="utf-8">
    <title>Hover test</title>
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script type="text/javascript">
        function topMenu1HoverIn(elemento) {
            // Devuelve la posición (índice) donde se encuentra la ultima / de la url
            // le sumamos uno, ya que necesitamos saber donde comienza el nombre del archivo,
            // en este caso una posición más.
            console.log(elemento.src.lastIndexOf('/'));
 
            // Luego ultilizamos el método substring para obtener desde esa posición hasta el final del string (en este caso todo el nombre del archivo)
            const nombreImagen = elemento.src.substring(elemento.src.lastIndexOf('/') + 1);
 
            if (nombreImagen === "04A.png") {
                document.getElementById("menu1").src = "images/04B.png";
            }
        }
 
        function topMenu1HoverOut(elemento) {
            const nombreImagen = elemento.src.substring(elemento.src.lastIndexOf('/') + 1);
 
            if (nombreImagen === "04B.png") {
                document.getElementById("menu1").src = "images/04A.png";
            }
        }
    </script>
 
</head>
 
<body>
 
    <div class="test">
 
        <a href="https://www.google.com/" target="_blank">
            <img id="menu1" src="images/04A.png" onMouseOver="topMenu1HoverIn(this); this.style.cursor='pointer';"
                onMouseOut="topMenu1HoverOut(this); this.style.cursor='none';" alt="">
        </a>
 
    </div>
</body>
 
</html>
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar
Imágen de perfil de Alejandro

Ruta relativa no funciona

Publicado por Alejandro (2 intervenciones) el 07/09/2022 21:10:36
Mil gracias por tu respuesta y tu tiempo, d4redevilx! Tremendamente agradecido! Un abrazo
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar