在普通的JavaScript(具有给定的图像的id
,能够容易地对其进行定位):
/* called by clicking the link (because the image is a child-element),
a simple means of preventing the default action: */
function nothing (e){
e.preventDefault();
}
// the 'event' itself is passed as the first argument to the function
function update (e){
// find what the event-type is ('click','mouseover', 'mouseout'):
switch (e.type){
// if it was the mouseover event, we:
case 'mouseover':
/* update the src property, retrieving the new src from the
custom data-over attribute of the element:
*/
this.src = this.getAttribute('data-over');
// break out of the switch:
break;
case 'mouseout':
// if the image doesn't contain the 'clicked' class-name, we:
if (!this.classList.contains('clicked')){
/* change the src to the string stored within the custom
data-out attribute:
*/
this.src = this.getAttribute('data-out');
}
// break out of the switch:
break;
// if it's the 'click' event:
case 'click':
/* we add the 'clicked' class if it's not already there,
and remove it if it is already there:
*/
this.classList.toggle('clicked')
break;
}
}
/* retrieving the relevant image element (by its id, using querySelector
and CSS-notation:
*/
var image = document.querySelector('#demo'),
// retrieving all the 'a' elements, then selecting only the first:
link = document.getElementsByTagName('a')[0];
// binding an event-handler to the image for the various events:
image.addEventListener('click', update);
image.addEventListener('mouseover', update);
image.addEventListener('mouseout', update);
// binding an event-handler to the 'a' element, to handle the 'click' event:
link.addEventListener('click', nothing);
JS Fiddle demo。
欢迎的话,请创建[的jsfiddle(http://jsfiddle.net/)让人们来帮助你。 –
为什么人们倒下了? - 我知道解释不是很清楚,但我猜英语并不是这个人的第一语言。 –