Tengo esta cosa que estoy tratando de hacer. Tengo una imagen de un mapa y dentro de ese mapa hay regiones. Estas regiones tienen puntos calientes en ellos de modo que usted puede hacer clic en ellos y va a cambiar todo el mapa con sólo la región. (sólo una simple div swap).

Necesito como un div porque en este div tengo los puntos calientes de la lista.

Hay un total de 4 divs de que me voy a tener que hacer esto con.

Si alguien me podría ayudar que sería increíble!

Por lo que los enlaces que aparecen en una tabla necesidad de reemplazar la imagen por separado, en un div.

<tr class="thumb"></tr>
<td>All Regions (shows main map) (link)</td>
</tr>

<tr class="thumb"></tr>
<td>Northern Region (link)</td>
</tr>

<tr class="thumb"></tr>
<td>Southern Region (link)</td>
</tr>

<tr class="thumb"></tr>
<td>Eastern Region (link)</td>
</tr>
</table>


<div>All Regions image</div>
<div>northern image</div>
<div>southern image</div>
<div>Eastern image</div>

No puedo poner imagenes porque no tengo suficientes puntos, así que yo sé la imagen de los enlaces no funcionan.

  • creo que se debe añadir un poco de código
  • bienvenido a Stackoverflow. Tengo una sugerencia para usted. Es mejor si usted puede mostrar algunos códigos. Como ¿dónde está el problema -o lo que ha pasado a través de la medida. De esa manera el que contestaba, también te puede dar una mejor respuesta. 😉 saludos!
  • Dulce como gracias hombre enfermo hacer una edición ahora. Gracias montones por su ayuda y apoyo chicos! Mala actualización ahora!
  • Prácticamente todas las regiones debe mostrar sólo 1 en un momento, en la página de carga de carga hasta el de todas las regiones de la imagen, a continuación, cuando usted haga clic en el enlace cambia a la imagen de la misma.
  • Es este código suficiente?
  • La tabla no cambia en absoluto, ya que será una refference para ver otros mapas cuando haga clic en ese enlace.
  • gracias por su ayuda el hombre que he creado este enlace jsfiddle.net/KNbQZ
  • jsfiddle.net/KNbQZ

InformationsquelleAutor Jake | 2011-02-21

3 Comentarios

  1. 55

    Puede utilizar .replaceWith()

    JS:

    $(function() {
    
      $(".region").click(function(e) {
        e.preventDefault();
        var content = $(this).html();
        $('#map').replaceWith('<div class="region">' + content + '</div>');
      });
    
    });

    HTML:

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    
    <div id="map">
      <div class="region"><a href="link1">region1</a></div>
      <div class="region"><a href="link2">region2</a></div>
      <div class="region"><a href="link3">region3</a></div>
    </div>

    • Necesito un enlace para cambiar un completo separada Div en lugar de que el texto de su auto. Así que haga clic en el enlace y el enlace permanece el mismo, pero las imágenes de cambio entre ellos
    • u puede añadir un poco de código
    • sí, este es bastante parecido a lo que im después, pero en lugar de los vínculos ocultos que tienen las imágenes. Así que hay una constante de la lista de nombres de las regiones. Cuando usted haga clic en el nombre de la región los cambios de la imagen en la div. Pongo el código en mi original de las misiones como para la estructura que estoy buscando. Muchas gracias por su ayuda
    • jsfiddle.net/KNbQZ Aquí está el enlace
    • Funciona como un encanto! Gracias.
  2. 13

    HTML

    <div id="replaceMe">i need to be replaced</div>
    <div id="iamReplacement">i am replacement</div>

    JavaScript

    jQuery('#replaceMe').replaceWith(jQuery('#iamReplacement'));
  3. 1

    Este debe ayudarle a

    HTML

    <!-- pretty much i just need to click a link within the regions table and it changes to the neccesary div. -->
    
    <table>
    <tr class="thumb"></tr>
        <td><a href="#" class="showall">All Regions</a> (shows main map) (link)</td>   
    
    <tr class="thumb"></tr>
    <td>Northern Region (link)</td>
    </tr>
    
    <tr class="thumb"></tr>
    <td>Southern Region (link)</td>
    </tr>
    
    <tr class="thumb"></tr>
    <td>Eastern Region (link)</td>
    </tr>
    </table>
    <br />
    
    <div id="mainmapplace">
        <div id="mainmap">
            All Regions image
        </div>
    </div>
    <div id="region">
        <div class="replace">northern image</div>
        <div class="replace">southern image</div>
        <div class="replace">Eastern image</div>
    </div>

    JavaScript

    var originalmap;
    var flag = false;
    
    $(function (){
    
        $(".replace").click(function(){
                flag = true;
                originalmap = $('#mainmap');
                $('#mainmap').replaceWith($(this));
            });
    
        $('.showall').click(
            function(){
                if(flag == true){
                    $('#region').append($('#mainmapplace .replace'));                
                    $('#mainmapplace').children().remove();
                    $('#mainmapplace').append($(originalmap));
                    //$('#mapplace').append();
                }
            }
        )
    
    })

    CSS

    #mainmapplace{
        width: 100px;
        height: 100px;
        background: red;
    }
    
    #region div{
        width: 100px;
        height: 100px;
        background: blue;
        margin: 10px 0 0 0;
    }

Dejar respuesta

Please enter your comment!
Please enter your name here