Cómo cambiar la imagen con onmouseover en lugar diferente en el que vuelve a la imagen predeterminada en el sitio?

No soy experto en esto así que me disculpan si este es muy básico, pero yo no podía encontrar respuestas.

Así que quiero tener una sección de navegación con categorías en el lado izquierdo de la página.
Cada categoría es diferente sitio y cada sitio tiene su propia imagen.
ex. category1.htm ha defaultpic1.jpg categoría 2.htm ha defaultpic2.jpg, ….

Cuando me pasa el ratón sobre el enlace a la categoría 2 en la navegación secciones quiero cambiar la imagen por defecto en el sitio actual a la imagen predeterminada en la categoría 2 y, a continuación, onmouseout, lo quiero volver a la de por defecto.

También tomar nota de mis imágenes tienen diferentes dimensiones, diferentes valores de altura.

Básicamente, sé que puedo cambiar el defaultpic fuente en cada página, pero quiero usar el mismo script que siempre fueron a buscar la ruta de acceso predeterminada y sólo lo utilizan, sin la necesidad de cambiar la línea en cada categoría.

Lo siento si no soy muy claro en eso, pero hago mi mejor.

Tengo este (eliminado todo lo demás, así que me acabo de pegar lo que necesito ayuda con):

<html>
<head>
<script type="text/javascript">
          function mouseOverImage2()
{
    document.getElementById("catPic").src='images/defaultpic2.jpg'; document.images['catPic'].style.width='280px'; document.images['catPic'].style.height='420px';;
}  function mouseOverImage3()
{
    document.getElementById("catPic").src='images/defaultpic3.jpg'; document.images['catPic'].style.width='280px'; document.images['catPic'].style.height='266px';;
}
function mouseOutImage()
{
    document.getElementById("catPic").src='???'; //here's what I don't know what to put
}
</script>
</head>
<body>
<div class="nav">
          <ul>
              <li><a href="subcategory2.htm" onmouseover="mouseOverImage2()"
    onmouseout="mouseOutImage()">Subcategory One</a></li>
              <li><a href="subcategory3.htm" onmouseover="mouseOverImage3()"
    onmouseout="mouseOutImage()">Subcategory 2</a></li></ul>
</div>
<div>
              <img id="catPic" src="images/defaultpic1.jpg" width="280" height="420" alt="">
            </div>
</body>
</html>
InformationsquelleAutor Seb | 2012-11-22

4 Kommentare

  1. 2

    Quisiera ocultar todos los valores en de datos* atributos, para que yo pudiera volver a utilizar las mismas funciones.
    Por ejemplo,

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8"/>
            <title>Cats</title>
            <script type="text/javascript">
    function mouseOverImage(elm) {
        var img = document.getElementById("catPic");
        img.src = elm.getAttribute('data-cat-image');
        img.style.width = elm.getAttribute('data-cat-width');
        img.style.height = elm.getAttribute('data-cat-height');
    }
    function mouseOutImage() {
        var img = document.getElementById("catPic");
        img.src = img.getAttribute('data-default-image');
        img.style.width = img.getAttribute('data-default-width');
        img.style.height = img.getAttribute('data-default-height');
    }
            </script>
        </head>
        <body>
            <div class="nav">
                <ul>
                    <li><a href="subcategory2.htm"
                           data-cat-image="images/defaultpic2.jpg" data-cat-width="280px" data-cat-height="420px"
                           onmouseover="mouseOverImage(this)" onmouseout="mouseOutImage()"
                          >Subcategory One</a></li>
                    <li><a href="subcategory3.htm"
                           data-cat-image="images/defaultpic3.jpg" data-cat-width="280px" data-cat-height="226px"
                           onmouseover="mouseOverImage(this)" onmouseout="mouseOutImage()"
                          >Subcategory 2</a></li>
                </ul>
            </div>
            <div>
                <img id="catPic" src="images/defaultpic1.jpg" alt=""
                     data-default-image="images/defaultpic1.jpg" data-default-width="280px" data-default-height="420px"
                     width="280" height="420"
                    />
            </div>
        </body>
    </html>

    Usted debería considerar también la posibilidad de asociar a los oyentes en JavaScript en lugar de utilizar en* atributos, ya que significa que usted puede completamente separada de su JavaScript en el código HTML.

    • Muchas gracias, este se ve muy interesante y es un gran trabajo! No sé lo que quiso decir acerca de los oyentes como soy muy malo coder pero le agradezco su ayuda.
    • Usted puede leer acerca de los detectores de eventos aquí. Si no has venido a través de ellos antes de que usted puede encontrar muy interesante ya que puede tener varias escuchas para el mismo evento, etc 🙂
  2. 2

    Usted necesita para almacenar la vieja imagen src en una variable temporal, o elemento en algún lugar, por ejemplo, el uso global:

    var originalImage;
    function mouseOverImage2()
    {
        originalImage = document.getElementById("catPic").src; 
        ... 

    Y, a continuación, restaurar el ratón fuera:

    document.getElementById("catPic").src=originalImage;

    Editar

    Puede almacenar en caché otras propiedades (altura, anchura) de la misma manera.
    Una cosa a tener en cuenta es no mezclar la vieja escuela html height y width atributos de estilo de la altura y la anchura – esto llevará a la confusión.

    He actualizar el Violín aquí

    • Me gusta este enfoque, pero para que funcione me necesita para eliminar todos los valores de anchura y altura, porque de lo contrario el (revertida) imagen por defecto mostrará reducido o ampliado si el hover imagen era diferente. Hay una manera de tener todavía los valores de anchura y altura en el código? Puedo cuidar de sitio para ser validado <img> sin estos parámetros no válidos página. Muchas gracias por la ayuda!
    • He actualizado el violín para mantener la anchura + altura sólo tenga en cuenta el uso de los estilos css ancho + alto, no a la antigua atributos html.
    • Genial, gran trabajo! Gracias!
  3. 1

    usted podría guardar lejos de la fuente de imagen predeterminada en mousein y, a continuación, restaurar en mouseout

    <script type="text/javascript">
    function mouseOverImage2()
    {
        if(typeof(document.getElementById("catPic").defaultSrc) == "undefined")
            document.getElementById("catPic").defaultSrc = document.getElementById("catPic").src;
        document.getElementById("catPic").src='images/defaultpic2.jpg'; document.images['catPic'].style.width='280px'; document.images['catPic'].style.height='420px';;
    }  
    function mouseOverImage3()
    {
        if(typeof(document.getElementById("catPic").defaultSrc) == "undefined")
            document.getElementById("catPic").defaultSrc = document.getElementById("catPic").src;
        document.getElementById("catPic").src='images/defaultpic3.jpg'; document.images['catPic'].style.width='280px'; document.images['catPic'].style.height='266px';;
    }
    function mouseOutImage(e)
    {
        if(typeof(document.getElementById("catPic").defaultSrc) != "undefined")
            document.getElementById("catPic").src= document.getElementById("catPic").defaultSrc;
    }
    </script>
    • Gracias, pero esto no se tome las dimensiones de la imagen original y cuando en onmouseout la imagen predeterminada se reduce o agranda el tamaño de la sustituye por onmouseover.
  4. 1

    Una adición a lo anterior, se puede ser más fácil en el largo plazo utilizar una función y pasar el elemento no como un parámetro. A lo largo de estas líneas

    <html>
        <head>
        <script type="text/javascript">
            function mouseOverImage(elementNo){
    document.getElementById("catPic").src='images/defaultpic'+elementNo+'.jpg';document.images['catPic'].style.width='280px';     document.images['catPic'].style.height='420px';;
        }  
    
        function mouseOutImage(elementNo){
            document.getElementById("catPic").src='images/defaultpic'+elementNo+'.jpg'; //here's what I don't know what to put
        }
    </script>
    </head>
    <body>
    <div class="nav">
              <ul>
                  <li><a href="subcategory2.htm" onmouseover="mouseOverImage(2)"
    onmouseout="mouseOutImage(1)">Subcategory One</a></li>
                  <li><a href="subcategory3.htm" onmouseover="mouseOverImage(3)"
    onmouseout="mouseOutImage(1)">Subcategory 2</a></li></ul>
    </div>
    <div>
           <img id="catPic" src="images/defaultpic1.jpg" width="280" height="420" alt="">
            </div>
    
     </body>
     </html>
    • Gracias por tu ayuda, pero me tienen diferente tamaño de las imágenes y que no funcionaría bien para mí.
    • mouseOverImage(elementNo, imgWidth, imgHeight){ va a hacer su código mucho más limpio y sostenible en el largo plazo
    • Bien se ve limpio, pero supongo que soy demasiado tonto para modificar a mis necesidades. ¿Qué pasa si mis imágenes no son nombradas defaultpic1.jpg, defaultpic2.jpg pero son como pricing.jpg, contact.jpg y así sucesivamente, y tienen diferentes valores de altura? ¿Qué debe hacer el código parecer entonces? Confío en que su enfoque se ve bien si las imágenes se denominan similares con sólo el número de cambio, pero es posible que si no?

Kommentieren Sie den Artikel

Bitte geben Sie Ihren Kommentar ein!
Bitte geben Sie hier Ihren Namen ein

Pruebas en línea