Изображения в Javascript - PullRequest
Новая
       30

Изображения в Javascript

0 голосов
/ 22 января 2010

Я создаю небольшое приложение, в котором отображается несколько изображений, и когда пользователь нажимает на любое из изображений, оно становится больше и заменяет изображение посередине.
Но я не получаю изображение, на которое нажали. 

<HTML>
<HEAD>
<SCRIPT LANGUAGE="text/javascript">

function swapImage(this.id) {
document.write("In SwapImage");
switch (this.id) {
 case img2:
   IMG1.src = "component1/images/image1.jpg"
   intImage = 2
   return(false);
 case img3:
   IMG1.src = "component1/images/image1.jpg"
   intImage = 2
   return(false);
 case img4:
   IMG1.src = "component1/images/image1.jpg"
   intImage = 2
   return(false);
 }
}
</SCRIPT>
</HEAD>
<BODY>
 <IMG id="IMG1" name="IMG1" src="image1.jpg" height="100px" width="100px">
 <IMG id="IMG2" name="IMG2" height="40px" width="40px" src="image1.jpg" onclick="swapImage(this.id);"> 
 <IMG id="IMG3" name="IMG3" height="40px" width="40px" src="image2.jpg" onclick="swapImage();">
 <a href="#">
   <IMG id="IMG4" name="IMG4" height="40px" width="40px" src="image1.jpg" onclick="swapImage();">
 </a>
 </BODY>
</HTML>

Ответы [ 6 ]

1 голос
/ 22 января 2010

Как насчет этого? 

<HTML>
<HEAD>
<SCRIPT LANGUAGE="javascript">
function swapImage(src) {
  document.getElementById("IMG1").src = src;
}
</SCRIPT>
</HEAD>
<BODY>
 <IMG id="IMG1" src="image1.jpg" height="100px" width="100px">
 <IMG id="IMG2" height="40px" width="40px" src="image1.jpg" onclick="swapImage(this.src);"> 
 <IMG id="IMG3" height="40px" width="40px" src="image2.jpg" onclick="swapImage(this.src);">
 <IMG id="IMG4" height="40px" width="40px" src="image1.jpg" onclick="swapImage(this.src);">
 </BODY>
</HTML>

В вашем коде есть некоторые ошибки, например:

  • Document.write не должен использоваться следующим образом
  • Вы делаете переключатель / регистр для несуществующих переменных (img2, img3, img4)
  • JavaScript чувствителен к регистру. IMG4 не равен img4
  • return - это утверждение. Если вы хотите вернуть false, вы пишете return false;
  • Каждое утверждение должно заканчиваться точкой с запятой.
  • Имена HTML-тегов должны быть написаны в нижнем регистре
  • this.id неправильно используется в функции swapImage (вообще не должно быть) ..
  • .. но это правильно при использовании в IMG2 ..
  • .. но неверно в IMG3 и IMG4
  • Тег img не должен иметь атрибута "name"

Надеюсь, это поможет.

1 голос
/ 22 января 2010

Чтобы добавить ответ Фабиана, в вашей функции ваш параметр должен быть id, а не this.id, и ваш оператор switch должен сделать то же самое, например: 

function swapImage(id) {
  switch (id) {
    // case statements
  }
}
1 голос
/ 22 января 2010

img3 и img4 отсутствуют в ссылке this.id, поэтому метод не знает о клике по изображению ... это то, о чем вы спрашивали?

0 голосов
/ 03 марта 2013

что по этому поводу. 

<style>
    ul li{
        float: left;
        margin:10px;
        list-style: none;
    }
</style>

  <div><img src="http://placehold.it/300x200" alt="" id="zoomImg" height="200" width="300" /></div>
  <ul>
      <li><img src="http://placehold.it/100x100&amp;text=First" alt="img1" onclick="swapImage(this.src)"></li>
      <li><img src="http://placehold.it/100x100&amp;text=Second" alt="img2" onclick="swapImage(this.src)"></li>
      <li><img src="http://placehold.it/100x100&amp;text=Third" alt="img3" onclick="swapImage(this.src)"></li>
  </ul>
  <script type="text/javascript">
      function swapImage(src){
         var zoomImg = document.getElementById('zoomImg');
          zoomImg.src = src;
      }
  </script>
0 голосов
/ 22 января 2010

Это то, что вы пытались сделать (не проверено)? 

<html>
    <head>
    <script type="text/javascript">
        var swapImage = function() {
            var IMG1=document.getElementById("img1");
            return function(){
                switch (this.id) {
                    case "img2":
                        IMG1.src = "component1/images/image2.jpg";
                        intImage = 2;
                    break;
                    case "img3":
                        IMG1.src = "component1/images/image3.jpg";
                        intImage = 2;
                    break;
                    case "img4":
                        IMG1.src = "component1/images/image4.jpg";
                        intImage = 2;
                    break;
                    default:
                    break;
                }
                return false;
            }
        };
        </script>
    </head>
    <body>
        <IMG id="img1" height="100px" width="100px" src="image1.jpg">
        <IMG id="img2" height="40px" width="40px" src="image2.jpg" onclick="swapImage();"> 
        <IMG id="img3" height="40px" width="40px" src="image3.jpg" onclick="swapImage();">
        <IMG id="img4" height="40px" width="40px" src="image4.jpg" onclick="swapImage();">

    </body>
</html>

Обратите внимание, что это не очень хороший способ сделать это.

0 голосов
/ 22 января 2010

Полагаю, вопрос: «Почему этот скрипт не работает?».

Есть несколько проблем с вашим скриптом:

  1. document.write() не должен использоваться для регистрации. Это может легко испортить вашу страницу.
  2. Вы не устанавливаете переменную IMG1. Вы, вероятно, не увидите что-то вроде var IMG1 = document.getElementById("IMG1"); в начале вашего скрипта.
  3. Случаи в операторе switch должны быть строковыми литералами. Вместо case img3: вы должны написать case "img3":
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...