Изменение изображения одним кликом (JavaScript) - PullRequest
Новая
       0

Изменение изображения одним кликом (JavaScript)

0 голосов
/ 14 марта 2012

Итак, я работаю над проектом для класса motion-graphics, в котором они не учат нас JavaScript, но затем заставляют нас создавать веб-страницы с использованием JavaScript. Нам сказали использовать DreamWeaver, и в большинстве случаев это работает нормально, но у меня проблемы с одной конкретной функцией -

Я хочу иметь возможность несколько раз менять изображение при нажатии на него. Я поместил код, сгенерированный DW, ниже, в основном, я хочу, чтобы sun.png при щелчке изменял на whitedwarf.png, и это прекрасно работает с помощью метода MM_swapImage (). Проблема в том, что я хочу иметь возможность нажать на новый whitedwarf.png и изменить его на 3-е изображение (planet.png для любопытных). 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<style type="text/css">
body {
margin-left: 100px;
margin-top: 100px;
background-image: url(Images/startile.gif);
}
</style>
<script type="text/javascript">
function MM_findObj(n, d) { //v4.01
var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src;     x.src=a[i+2];}
}
</script>
</head>

<body>
<img src="Images/sun.png" width="500" height="500" id="Image1" onclick="MM_swapImage('Image1','','Images/whitedwarf.png',0)" />
</body>
</html>

Я предоставил как можно больше необходимой информации, я точно не знаком с JS, хотя я неплохо программировал на Java, поэтому я не совсем неграмотен.

Ответы [ 5 ]

0 голосов
/ 14 марта 2012

Вот более элегантное решение:

http://jsfiddle.net/H5fPT/

(function() {
    var Main = {
        images: [],
        idx: 0,

        fillArray: function(arr) {
            if (typeof arr == "object") {
                if (arr.length) {
                    Main.images = Main.images.concat(arr);
                } else Main.images.push(arr);
            } else {
                if (arguments.length) {
                    for (var i = 0; i < arguments.length; i++) {
                        Main.images.push(arguments[i]);
                    }
                } else return;
            }
        },
        changeImage: function(el, n) {
            el.src = Main.images[Main.idx];
            Main.idx += n;
        }
    };

    var a = [
        'http://bit.ly/sbK2Ub',
        'http://bit.ly/yYi5oQ',
        'http://bit.ly/4GjHJn'
    ];
    var b = document.getElementById('g'),
        c = document.getElementById('e');

    Main.fillArray(a);

    b.onclick = function() {
        Main.changeImage(c, 1);
    };
})();​

Используйте Main.fillArray(arr);, чтобы заполнить массив изображениями, и используйте Main.changeImage(el, n);, где el - это элемент изображения, чей src изменится, а n - количество изображений, которое вы хотите пропустить (в вашем случае , 3).

0 голосов
/ 14 марта 2012

Вот быстрая и грязная версия этой функциональности, которая на самом деле удобочитаема для людей: 

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <style type="text/css">
      body {
        margin-left: 100px;
        margin-top: 100px;
        background-image: url(Images/startile.gif);
      }
    </style>
    <script type="text/javascript">
    var Images = {
      library: ['Images/sun.png', 'Images/whitedwarf.png', 'Images/planet.png'],
      swap: function (element) {
        var elementSrc = element.src,
            i = 0,
            libLength = this.library.length,
            src = false;
        for(; i < libLength; i++) {
          src = this.library[i];
          if(src === elementSrc) {
            element.setAttribute('src', this.library[(i+1) % libLength]);
            break;
          }
        }
      }
    }
    </script>
   </head>

  <body>
    <img src="Images/sun.png" width="500" height="500" id="Image1" onclick="Images.swap(this)" />
  </body>
</html>

Используя этот код, вы можете добавить произвольное количество изображений, добавив их URL в Images.library-array.В качестве подтверждения концепции я предоставил jsFiddle (площадка для HTML, JS и CSS).

Демонстрацию можно посмотреть здесь: http://jsfiddle.net/L6DW9/

РЕДАКТИРОВАТЬ Я также отредактировал недостающий фрагмент HTML-страницы, на случай, если вы только что скопировали все это.

EDIT2 : чтобы пропустить перенос, измените swap: function () {[...]} на следующее: 

swap: function (element) {
    var elementSrc = element.src,
        i = 0,
        libLength = this.library.length,
        src = false;
    for(; i < libLength; i++) {
        src = this.library[i];
        if(src === elementSrc) {
            if((i+1) >= libLength) {
               element.onclick = false;
            }
            element.setAttribute('src', this.library[(i+1) % libLength]);
            break;
        }
    }
}
0 голосов
/ 14 марта 2012

Использование Javascript 

function onClickFunction(){

    var imageSRC = document.getElementById("Image1").src = "whitedwarf.png"
}

Использование jQuery 

function onClickFunction(){
    $("#Image1").attr("src", "whitedwarf.png");
}
0 голосов
/ 14 марта 2012

«Использовать Dreamweaver»? Фу на Dreamweaver. Вам не нужно вонять Dreamweaver.

Начните с коллекции изображений, сгруппированных внутри div или section (если вы используете HTML5) Если CSS или Javascript отключены, изображения будут отображаться нормально, поэтому вы все равно сможете их увидеть. 

<div id="imgs">
<img src="img.jpg" alt="My Image 1"/>
<img src="img2.jpg" alt="My Image 2"/>
</div>

Затем, когда страница загружается, скрыть все изображения, кроме одного, и привязать событие щелчка к каждому изображению, чтобы скрыть себя и отобразить следующее. 

var port_imgs, i;
    window.onload = function () {
            //get all the images in "#imgs"
        port_imgs = document.getElementById("imgs").getElementsByTagName("img");
           //loop through, hiding them all
        for (i = 0; i < port_imgs.length; i++) {
            port_imgs[i].style.display = "none";
                    //wire up the click event and do the magic
            port_imgs[i].onclick = (function (k) {
                var r = function () {
                    this.style.display = "none";
                    if (k >= port_imgs.length) { k = 0 }
                    port_imgs[k].style.display = "block";
                };
                return r;
            })(i+1);
        }
            //un-hide (display) the first image so we're all set to go
        port_imgs[0].style.display = "block";
    }

Вы можете увидеть живой пример на моем сайте , где я использовал то же самое.

0 голосов
/ 14 марта 2012

Как насчет сохранения списка изображений в массиве и последующего переключения src элемента изображения по щелчку, как это. 

i = 0
var images = ['Images/sun.png', 'Images/whitedwarf.png', 'Images/planet.png']
function MM_swapImage() {
 if(i >= images.length)
  {
    img = document.getElementById('Image1')
    img.setAttribute('onclick','')
    return

 }
 img = document.getElementById('Image1')
 img.setAttribute('src',images[i])
 i = i+1
}
...