HTML дээр зураг оруулах, Солигддог зураг хийх

Wednesday, December 31, 1969 - 07:00 PM

Мэдээж зураг оролцоогvй бvтсэн вэб гэж ховор байхаа. HTML кодчлолд зураг байна гэдгийг <img> тагаар заана. Энэ таг дангаараа буюу тєгсгєх таггvй бичигддэг.

Жишээ нь:

<html>
<body> Энэ бол миний зураг : <br>
<img src=”web/me.gif”>
</body>
</html>

Мєн зургийнхаа урт єргєн, хvрээ, зэрэгцvvлэлт зэргийг зааж єгч болно. Жишээ харъя :

<html>
<body>
<img src=”web/me.gif” border=1><br> <!—Huree zaaj bna -->
<img src=”web/me.gif” width=”100” height=”50”><br> <!—Urt, ondoriig zaaj bna -->s
<img src=”web/me.gif” alt=”Ene bol bi”><br> <!—ene n zurgandaa tailbar hiij bna Hereh tanii zurag yamar negen shaltgaanaar haragdahgui yed ene tailbar haragdana. -->
<img src=”web/me.gif” hspace="2"><br> <!—zurgiin zuun, baruun tald yamar zai avahiig zaaj bna -->
<img src=”web/me.gif” vspace="10"><br> <!—zurgiin deed,dood tald yamar zai avahiig zaaj bna -->
</body>
</html>

Та бас єєр сервер дээр байгаа зургыг єєрийн хуудсанд байрлуулж болно :
<img src=”http://www.yahoo.com/news/test.gif” alt=”oor servet baigaa”>
Зургаа холбоос болгохдоо ємнєх хичээл дээр vзсэн <a тагыг ашиглана.

<a href=”zurag/test.gif”><img src=”zurag/test.gif” alt=”Tomruulj harah” width=”50” height=”50”></a>



Солигддог зураг гэж юу вэ?
Та єєр вэбvvдийг vзэж байхдаа ажигласан бол хулганы заагч очих vед єєр єнгєтэй ч юмуу болж єєрчлєгддєг. Энэ нь солигддог зургыг ид шид юм. Солигддог зургыг ихэвчлэн Вэбний меню хийвэл илvv их тохиромжтой байдаг. Yvнийг ганц HTML ашиглан хийх боломжгvй харин JavaScript ашиглан хvссэн vр дvнгээ авч чадна. JavaScript ийн талаархи хичээлийг та манай хичээлийн бvлгvvдээс олж vзэх боломжтой. Доор жишээ болгон нэгэн хэсэг кодыг тавилаа.

<html>
<head>
<title>Rollover image test</title>
<script language="JavaScript" type="text/JavaScript">
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a)&&x.oSrc;i++) x.src=x.oSrc ;
}

function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a.indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a;}}
}

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[n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers.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))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
</script>
</head>
<body>
<a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image1','','zurag1.gif',0)"><img src="zurag2.gif" name="Image1"></a>
</body>
</html>

Энд Zurag1.gif бол энгийн байх vеийн тєлєвийн зураг, Zurag2.gif бол хулганы заагч очих vед солигдох зураг юм.


Close window