Перекрестное затухание изображений JavaScript

У меня есть одно изображение:

 Clown%20Fish

Кроме того, я должен показать другое изображение:

 image.jpeg

над изображением:

 energy.jpeg

(показать с webkit-transition: свойство opacity 1s easy-in-out)

я получил первую форму кода здесь: http://css3.bradshawenterprises.com/cfimg/

доза не работает...

это живое демо: http://liveweave.com/6EgbYH

вот код:

 <!DOCTYPE html>
 <html>
 <head>
 <style>

 #cfnormal {
   position:relative;
   height:281px;
   width:450px;
   margin:0 auto;
 }

 #cf {
   position:relative;
   height:10px;
   width:450px;
   margin:0 auto;
 }


 #cf img {
   position:absolute;
   left:0;
   width:450px;
   -webkit-transition: opacity 1s ease-in-out;
   -moz-transition: opacity 1s ease-in-out;
   -o-transition: opacity 1s ease-in-out;
   transition: opacity 1s ease-in-out;
 }


 </style>

 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
 </script>

 <script>
 function change(x)
 {
var element = document.getElementById('imgtop');
element.style.opacity = "0";
 }
 </script>
 </head>

 <body>

 <div id="cf">
   <img id="imgbott" class="bottom" src="./image.jpeg" />
   <img id="imgtop" class="top" src="./energy.jpeg" />
 </div>

 <div id="cfnormal">
   <img onmouseover="change(this)" src="./Clown%20Fish.jpg" />
 </div>

 </body>
 </html>
Источник

1 ответ

Я должен был показать одно изображение поверх другого, когда третье изображение запускает событие при наведении мыши

вот правильный код:

  <!DOCTYPE html>
  <html>
  <head>
  <style>

  #cfnormal {
    position:relative;
    height:281px;
    width:450px;
    margin:0 auto;
  }

  #cfnormal img {
    position:relative;
    height:281px;
    width:450px;
    margin:0 auto;
  }

  #cf {
    position:relative;
    height:10px;
    width:450px;
    margin:0 auto;
  }


  #cf img {
    position:absolute;
    left:0;
    width:450px;
    -webkit-transition: opacity 1s ease-in-out;
    -moz-transition: opacity 1s ease-in-out;
    -o-transition: opacity 1s ease-in-out;
    transition: opacity 1s ease-in-out;
  }


  </style>

  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
  </script>

  <script>
  function change(x)
  {
var element = document.getElementById('imgtop');
element.style.opacity = "0";
  }
  function normalImg(x)
  {
var element = document.getElementById('imgtop');
element.style.opacity = "1";
  }
  </script>
  </head>

  <body>

  <div id="cf">
    <img id="imgbott" class="bottom" src="http://youngsskatingcenter.com/nss-            folder/pictures/Many_colors.gif" />
  <img id="imgtop" class="top"       src="http://freepages.genealogy.rootsweb.ancestry.com/~genphotos2/jwline.jpg" />
  </div>

  <div id="cfnormal">
    <img onmouseover="change(this)"  onmouseout="normalImg(this)"       src="http://www.vmapas.com/maps/2748-2/Immagine_Satellitare_Mondo_Occidentale.jpg" />
  </div>

  </body>
  </html>
Источник
Другие вопросы по тегам