<! DOCTYPE html PUBLIC "-// W3C // dtd html 4.01 Transitional // EN" "http://www.w3.org/TR/html4/loose.dtd"> <Html> <Head> <Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"> <Title> Insert title here </title> <Style> H1 {position: absolute; margin-left: 150px ;} Ul {position: absolute; margin-top: 50px; margin-left: 80px ;} Li {float: left; list-style: none; padding: 1em ;} Img {position: absolute; margin-top: 100px; margin-left: 100px; width: 1000px; height: 600px ;} P {position: absolute; margin-top: 800px; margin-left: 550px ;} </Style> <Script> Function showCat (){ Var osrc = a. getAttribute ("href "); Var oimg = document. getElementById ("img1 "); Oimg. setAttribute ("src", osrc ); Var op = document. getElementById ("p1 "); Var otxt = a. getAttribute ("title "); Op. childNodes [0]. nodeValue = otxt ;; } </Script> </Head> <Body> <H1> Cat Home <Ul> <Li> <A href = "img/1.jpg" title =" I am a white cat "onclick =" showCat (this); return false; "> White Cat </a> </Li> <Li> <A href = "img/2.jpg" title =" "onclick =" showCat (this); return false; "> </a> </Li> <Li> <A href = "img/3.jpg" title =" I Am a flower cat "onclick =" showCat (this); return false; "> flower cat </a> </Li> </Ul> <P id = "p1"> choose Cat Photo </p> </Body> </Html> |