JavaScript - Mostrar imagen de una variable php al pasar el raton por texto

 
Vista:
sin imagen de perfil
Val: 13
Ha disminuido su posición en 4 puestos en JavaScript (en relación al último mes)
Gráfica de JavaScript

Mostrar imagen de una variable php al pasar el raton por texto

Publicado por iván (8 intervenciones) el 29/04/2020 19:16:08
Hola a ver si alguien pudiera ayudarme, necesitaría un poco de ayuda, he visto varios códigos para al pasar el ratón por un texto mostrar una imagen. El tema es que seria al pasar el ratón por un texto quiero que muestre una imagen previamente cargada en una variable en php almacena la variable.
Alguien podría ayudarme por favor?
Saludos, gracias de antemano
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 joel
Val: 3.506
Oro
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

Mostrar imagen de una variable php al pasar el raton por texto

Publicado por joel (895 intervenciones) el 29/04/2020 20:30:04
Hola Iván, si la ubicación de la imagen tienes que leerla desde PHP, tendrás que hacer una petición AJAX al servidor para obtener el nombre de la imagen.

Una buena opción si la imagen no va a cambiar, es guardar el nombre de la imagen en una variable de JavaScript.... sera mas sencillo porque no tendrías que hacer la petición AJAX.
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
sin imagen de perfil
Val: 13
Ha disminuido su posición en 4 puestos en JavaScript (en relación al último mes)
Gráfica de JavaScript

Mostrar imagen de una variable php al pasar el raton por texto

Publicado por iván (8 intervenciones) el 30/04/2020 09:38:01
Hola gracias por contestar, la imagen una vez cargada la pagina no cambia.
Te paso el archivo php donde se carga la imagen, en la línea 445 o 446, esta montando la tabla y es la zona donde pone la cabecera de la tabla y son los titulos que quiero que pase el raton por encima y salga una imagen. En la imagen adjuntada donde se ve la cabecera Best Nr. L3, etc.. Al pasar por ahi que salga una ventana modal con una imagen que carga en la línea 615 aprox,(public function getVariationData($key, $variation)) esa es la función que carga el atributo de imagen de la tabla de variation table.
Captura-de-pantalla-2020-04-30-a-las-9.32.41
Me he quedado atascado, he visto en muchos sitio como intentar hacerlo pero no he conseguido, por favor toda ayuda que me deis os lo agradecería.
Muchas gracias.
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
sin imagen de perfil
Val: 13
Ha disminuido su posición en 4 puestos en JavaScript (en relación al último mes)
Gráfica de JavaScript

Mostrar imagen de una variable php al pasar el raton por texto

Publicado por iván (8 intervenciones) el 30/04/2020 18:36:06
Estoy intentando hacerlo de otra forma a ver si me podrias ayudar.
Tengo este codigo en la entrada de wordpress
1
2
3
4
5
6
7
8
9
<a href="#jsModal" id="popup" class="jsModalTrigger">Trigger</a>
 
<div id="jsModal" class="modal">
  <div class="modal__overlay jsOverlay"></div>
  <div class="modal__container">
    <p>Modal window text</p>
    <button class="modal__close jsModalClose">&#10005;</button>
  </div>
</div>
El css de esta forma
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
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
@import "compass/css3";
 
.modal{
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 20;
  padding: 30px;
  width:  100%;
  height: 100%;
  margin: 0;
  padding: 0;
  opacity: 0;
  visibility: hidden;
  transition:visibility 0s linear 0.1s,opacity 0.3s ease;
 
  &.open{
    visibility:visible;
    opacity: 1;
    transition-delay:0s;
  }
 
  &__overlay{
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 21;
    background-color: rgba(0,0,0,0.7);
  }
 
  &__close{
    position: absolute;
    top: 10px;
    right: 10px;
    border: none;
    outline: none;
    background: none;
    font-size: 24px;
    color: #747474;
    font-weight: bold;
 
    &:hover{
      color: #000;
    }
  }
 
  &__container{
    position: relative;
    z-index: 22;
    width: 400px;
    height: 200px;
    top: 50%;
    transform: translateY(-50%);
    box-shadow:  0 0 10px #fff;
    margin: 0 auto;
    padding: 30px;
    background-color: #fff;
    text-align: center;
  }
}
Este otro en un archivo creado en el hijo de mi tema, carpeta js
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
48
49
50
51
52
53
54
55
56
/* This script supports IE9+ */
(function() {
  /* Opening modal window function */
  function openModal() {
      /* Get trigger element */
      var modalTrigger = document.getElementsByClassName('jsModalTrigger');
 
      /* Set onclick event handler for all trigger elements */
      for(var i = 0; i < modalTrigger.length; i++) {
          modalTrigger[i].onclick = function() {
            var target = this.getAttribute('href').substr(1);
            var modalWindow = document.getElementById(target);
 
            modalWindow.classList ? modalWindow.classList.add('open') : modalWindow.className += ' ' + 'open';
          }
      }
  }
 
  function closeModal(){
    /* Get close button */
    var closeButton = document.getElementsByClassName('jsModalClose');
    var closeOverlay = document.getElementsByClassName('jsOverlay');
 
    /* Set onclick event handler for close buttons */
      for(var i = 0; i < closeButton.length; i++) {
        closeButton[i].onclick = function() {
          var modalWindow = this.parentNode.parentNode;
 
          modalWindow.classList ? modalWindow.classList.remove('open') : modalWindow.className = modalWindow.className.replace(new RegExp('(^|\\b)' + 'open'.split(' ').join('|') + '(\\b|$)', 'gi'), ' ');
        }
      }
 
    /* Set onclick event handler for modal overlay */
      for(var i = 0; i < closeOverlay.length; i++) {
        closeOverlay[i].onclick = function() {
          var modalWindow = this.parentNode;
 
          modalWindow.classList ? modalWindow.classList.remove('open') : modalWindow.className = modalWindow.className.replace(new RegExp('(^|\\b)' + 'open'.split(' ').join('|') + '(\\b|$)', 'gi'), ' ');
        }
      }
 
  }
 
  /* Handling domready event IE9+ */
  function ready(fn) {
    if (document.readyState != 'loading'){
      fn();
    } else {
      document.addEventListener('DOMContentLoaded', fn);
    }
  }
 
  /* Triggering modal window function after dom ready */
  ready(openModal);
  ready(closeModal);
}());
Y por ultimo en el funtion.php tengo añadido el archivo javascrip con este codigo
1
2
3
4
5
6
7
8
add_action("wp_enqueue_scripts", "dcms_insertar_js");
 
function dcms_insertar_js(){
 
    wp_register_script('miscript', get_stylesheet_directory_uri(). '/js/custom.js', array('jquery'), '1', true );
    wp_enqueue_script('miscript');
 
}

La cosa es que no hace nada cuando le doy a la funcion, alguien podria ayudarme por favor.
Saludos, gracias
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