[Art] DOM programming improved version of Photo Gallery

<!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=gb2312" />
<title>查看图片</title>
<style type="text/css">
ul,li{ list-style:none;}
ul li{ line-height:24px; float:left; padding:1em;}
img{ display:block; clear:both;}
</style>
</head>

< Body > 
< h1 of > the Snapshots </ h1 of > 
< UL ID = 'imagegallery' > 
    < Li > < A the href = "Images / 1.jpg"   title = "pic01111" > first picture </ A > </ Li > 
    < Li > < A the href = "images / 2.jpg"   title = "pic02222" > second image </ A > </ Li > 
    < Li > <a href="images/3.jpg" title="pic03333">第三张图片</a></li>
    <li><a href="images/4.jpg" title="pic04444">第四张图片</a></li>
</ul>
<img id='placeholder' alt='My Image Gallery'  src="images/placeholder.gif"/>
<p  id="description">Choose an image</p>
<script>
window.onload=prepareGallery;
function prepareGallery(){
    if(!document.getElementById ) return false;
    if(!document.getElementsByTagName) return false;
    if(!document.getElementById('imagegallery')) return false;
    var gallery=document.getElementById('imagegallery');
    var links=gallery.getElementsByTagName('a');
    for(var i=0;i<links.length;i++){
        links [I] .onclick = function () {
             ShowPic ( the this );  return ShowPic (the this)! ;  return ShowPic (the this) to false:? to true ;
             return  to false ; 
        } 
　　　　 links [I] = .onkeypress links [I] .onclick ;   // question: when tested under firefox not write this code can also switch the tab, and write this code after the first picture after a successful handover is not moving, you can not switch the second picture
    }
}

function ShowPic (whichpic) {
     IF ( ! document.getElementById ( ' placeholder ' )) return  to false ;
     var placeholder = document.getElementById ( ' placeholder ' ); 
IF (! = placeholder.nodeName ' the IMG ') return to false ; // * ****** nodeName property always returns a value uppercase letters, even if an element in an HTML document in lowercase letters .
    placeholder.setAttribute('src',whichpic.getAttribute('href'));    //或者placeholder.src=source     (var source=whichpic.href);
    if(document.getElementById('description')){
        var text=whichpic.getAttribute('title')?whichpic.getAttribute('title'):' '; //三元操作符
        var description=document.getElementById('description');
if(description.firstChild.nodeType==3){
          description.firstChild.nodeValue=text;
        }
    }
return true;
}

</script>
</body>
</html>

Red javascript code section is to consider backward compatibility rather write! Do not do too much to suppose!

return !showpic(this);

　Analysis: This code is mainly to resolve when showpic function in the placeholder does not exist (The code will also lead to a default return false links not clickable)

showpic () should be in the picture if the exchange is successful, return true; if unsuccessful, return false;

and so! showpic () is false by default when the link is not available Click on the right　

links[i].onkeypress=links[i].onclick;

Parsing: onkeypress event handler is very easy to go wrong. Each press of a button a user will trigger it. In some browsers, and even including the Tab key! This means that if the binding on onkeypress event handler returns false, users can only use the keyboard to access those will never be able to leave the current link.

Plus there is a problem --- as long as the picture after the handover success, showpic function returns false;

Fortunately, onclick event handler smarter than we thought. Although its name "onclick" to give the impression only with mouse clicks associated with, but that is not true: in almost all browsers, use the TAB key to move to a link and press the Enter key actions onclik will trigger event .

Best not to use onkeypress event handler. onclick event handler has been able to meet their needs. Although it is called "onclick", but its support for keyboard access quite perfect .

Reproduced in: https: //www.cnblogs.com/positive/p/3662533.html

[Art] DOM programming improved version of Photo Gallery

Guess you like