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

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

Я хочу, чтобы иметь возможность изменять изображение несколько раз при нажатии. Я поставил код сгенерированного DW ниже, в основном я хочу, чтобы sun.png изменился на whitedwarf.png при нажатии, и это отлично работает с использованием метода MM_swapImage(). Втирание в том, что я хочу, чтобы можно было щелкнуть новый whitedwarf.png и изменить его на третье изображение (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, так что я не совсем неграмотный.

источник

2012-03-13 Anonymous

Как я уже сказал, нам поручено использовать DreamWeaver, а не изучать реальный язык, поэтому я работаю с тем, что мне дано. –

Какова должна быть переменная 'parent'? – 0x499602D2

@David - это свойство 'window.parent': https://developer.mozilla.org/en/DOM/window.parent –

"Использование Dreamweaver"? Phooey на Dreamweaver. Вы не нуждаетесь в Dreamliner.

Начало с коллекцией изображений, сгруппированных внутри 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"; 
    }

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

источник

2012-03-13 23:25:35

Итак, вы указываете div как «изображения», но массив, кажется, вызывает «imgs». Есть ли разница? Я очень чувствую, что у меня отсутствует кусок. –

ack, извините. мой плохой, опечатка. На моем сайте это называлось «портфолио», и здесь это не имело смысла, поэтому я изменил его, но я изменил его на две разные вещи. изм. –

@ user1265486 fixed :) должен работать нормально –

Как насчет сохранения списка изображений в массиве и последующего переключения 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 
}

источник

2012-03-13 23:20:19 malbani

Я собираюсь попробовать это. Глядя на это, я предполагаю, что это заменит тело MM_swapImage()? –

Да, если вы замените свою функцию и измените массив изображений, она должна работать – malbani

Если я удалю i = 0 после имени функции, не будет ли она петлей? (кроме циклов, которые я хочу отключить, это отлично работает - большое спасибо) –

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

function onClickFunction(){ 

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

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

function onClickFunction(){ 
    $("#Image1").attr("src", "whitedwarf.png"); 
}

источник

2012-03-13 23:23:38

Итак, Я не боюсь выглядеть глупо - не так ли, чтобы я снова и снова возвращал один и тот же образ? Используя JS, как мне изменить «whitedwarf.png» на другое имя файла, нажав? –

Да! Это верно. Я просто добавляю код для его изменения один раз. Вы можете сделать это с помощью Google: –

function onClickFunction() { var imageSRC = document.getElementById ("Image1"). Src; if (imageSRC == "sun.png") { imageSRC = "whitedwarf.png"; } else { imageSRC = "sun.png"; } } –

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

<!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 playground) в качестве доказательства концепции.

Вы можете посмотреть демо здесь: http://jsfiddle.net/L6DW9/

EDIT я редактировал в недостающей части страницы 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; 
     } 
    } 
}

источник

2012-03-13 23:27:56 PatrikAkerstrand

Я просто попробовал это, и он фактически загрузил мои изображения (другие предлагаемые решения havent), но когда я нажимаю, ничего не происходит. Есть что-то еще, что мне нужно добавить? –

Вы проверили, что введенные мной пути верны? i.e: 'Images/whitedwarf.png' и' Images/planet.png' – PatrikAkerstrand

Да, он находит первый файл без проблем, он просто не меняется после щелчка. И я triple-checked для опечаток, пути совпадают. –

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

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 является ima ge, чей src изменится и n - количество изображений, которые вы хотите пропустить (в вашем случае 3).

источник

2012-03-13 23:56:46 0x499602D2

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

ответ

Смежные вопросы