JavaScript Tutorial/HTML Tags/img

Материал из Web эксперт
Перейти к: навигация, поиск

Add onerror handler to image element within document element array (IE)

<html>
<head>
    <title>Image Error Test</title>
    <script type="text/javascript">
        function handleLoad() {
            document.images[0].onerror = function () {
                alert("An error occurred loading the image.");
            };
            document.images[0].src = "doesNotExist.gif";
        }
    </script>
</head>
<body onload="handleLoad()">
    <P>The image below attempts to load a file that doesn"t exist.</p>
    <img/>
</body>
</html>


Change image align

<html>
<head>
<title></title>
<script type="text/javascript">
function procImage() {
   var img = document.images[0];
   var imgAttr = img.align + " " + img.alt + " " + img.src + " " + img.width + " " + img.height;
   alert(imgAttr);
   img.src="http://www.wbex.ru/style/logo.png";
   img.width="100";
   img.height="100";
   img.alt="Alternative";
   img.align="left";
   img.title="Upright";
   
   imgAttr = img.align + " " + img.alt + " " + img.src + " " + img.width + " " + img.height;

   alert(imgAttr);
   document.close();
} 
</script>
<body onload="procImage();">
<img src="asdf.gif" alt="asdf" />
</body>
</html>


Change image title

<html>
<head>
<title></title>
<script type="text/javascript">
function procImage() {
   var img = document.images[0];
   var imgAttr = img.align + " " + img.alt + " " + img.src + " " + img.width + " " + img.height;
   alert(imgAttr);
   img.src="http://www.wbex.ru/style/logo.png";
   img.width="100";
   img.height="100";
   img.alt="Alternative";
   img.align="left";
   img.title="Upright";
   
   imgAttr = img.align + " " + img.alt + " " + img.src + " " + img.width + " " + img.height;

   alert(imgAttr);
   document.close();
} 
</script>
<body onload="procImage();">
<img src="asdf.gif" alt="asdf" />
</body>
</html>


Change link image in mouse in and mouse out

<HTML>
<HEAD>
<SCRIPT language="JavaScript">
<!--
if (document.images) {
   var pic1_init= new Image();
   pic1_init.src="1.gif";
   var pic2_init= new Image();
   pic2_init.src="2.gif";
   var pic3_init= new Image();
   pic3_init.src="3.gif";
   var pic4_init= new Image();
   pic4_init.src="4.gif";
   // Preload images for mouseover
   var pic1_new= new Image();
   pic1_new.src="5.gif";
   var pic2_new= new Image();
   pic2_new.src="6.gif";
   var pic3_new= new Image();
   pic3_new.src="7.gif";
   var pic4_new= new Image();
   pic4_new.src="8.gif";
   alert("init");
}
function change_it(the_name) {
   alert("in change it");
   if (document.images) {
      document.images[the_name].src= eval(the_name+".src");
      alert("changed to:"+document.images[the_name].src);
   }
}
function change_back(the_name) {
   alert("in change back");
   if (document.images) {
      document.images[the_name].src= eval(the_name+".src");
      alert("change back to:"+document.images[the_name].src);
   }
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<A HREF="#" onMouseOver="change_it("1")" onMouseOut="change_back("8")"><IMG SRC="1.gif" name="1" id="1"></A>
<P>
<A HREF="#" onMouseOver="change_it("2")" onMouseOut="change_back("7")"><IMG SRC="2.gif" name="2" id="2"></A>
<P>
<A HREF="#" onMouseOver="change_it("3")" onMouseOut="change_back("6")"><IMG SRC="3.gif" name="3" id="3"></A>
<P>
<A HREF="#" onMouseOver="change_it("4")" onMouseOut="change_back("5")"><IMG SRC="4.gif" name="4" id="4"></A>
</BODY>
</HTML>


Change vspace for image

<html>
<head>
<title>Build-o-Table</title>
<script type="text/javascript">
function procImage() {
   var img = document.getElementById("img1");
   img.vspace="10";
   
} 
</script>
<body onload="procImage();">
<img id="img1" src="http://www.wbex.ru/style/logo.png" />
<table id="table1">
<tr><td>adsf</td></tr>
</table>
</body>
</html>


Image

The Image object represents an image that was created with the tag.

Images can be downloaded and cached dynamically by using the Image() constructor.

Images cannot be displayed using the constructor.

The constructor takes two optional arguments, width and height.

width specifies the width of the image in pixels.

height specifies the height of the image in pixels.

If these arguments are larger or smaller than the actual image, the image will be stretched to these dimensions.

The image to load is specified using dot notation and the src property.

Properties/Methods/Events Description border Width of border around image complete Has image finished loading? height Height of image hspace Padding on left and right of image. lowsrc Alternate image for low-resolution displays name Name of image src URL of image vspace Padding on top and bottom of image width Width of image handleEvent() Invokes an images event handler onAbort Handler when image load is aborted onError Handler when error occurs while loading image onKeyDown Handler for KeyDown events within image onKeyPress Handler for KeyPress events within image onKeyUp Handler for KeyUp events within image onLoad Handler when image is finished loading



<html>
    <head>
    <title>Example of Image Object</title>
    <script language="JavaScript">
    <!--
    alternate=0;
    
    circle = "circle.gif";
    square = "square.gif";
    function changeImage(){
      if(alternate==0) {
        document.magic.src=circle;
        alternate=1;
      } else {
        document.magic.src=square;
        alternate=0;
      }
    }
    -->
    </script>    
    </head>
    <center>
    <form>
    <input type="button"
           value="Change Image"
           onClick="changeImage()">
    </form>
    <img name="magic" src="http://www.wbex.ru/style/logo.png">
    </center>
    </html>


Image.border

The border property specifies the width of the border around an image in pixels.

This property can only be set by the BORDER attribute of the tag.



<html>
    <head>
    <title>Example of border Property</title>
    </head>
    <img name="circle"
         src="http://www.wbex.ru/style/logo.png"
         border=10>
    <br>
    <script language="JavaScript">
    <!--
    document.write("The image has a border with of ");
    document.write(document.circle.border," pixels.");
    -->
    </script>
    </html>


Image.complete

The complete property is a Boolean value that specifies if an image has finished loading.

After an image has completely loaded, the property is changed to false.

If the load is aborted or an error occurs during the loading process, the property will be set to true.



<html>
    <head>
    <title>Example of complete Property</title>
    </head>
    <img name="circle" src="http://www.wbex.ru/style/logo.png">
    <br>
    <script language="JavaScript">
    <!--
    if(document.circle.ruplete == true)
      document.write("The image has finished loading.");
    else
      document.write("The image has not finished loading.");
    -->
    </script>
    </html>


Image.height

The height property of the Image object specifies the height of the image in pixels.

This property can only be set by the HEIGHT attribute of the tag.



<html>
    <head>
    <title>Example of height property</title>
    </head>
    <img name="circle"
         src="http://www.wbex.ru/style/logo.png"
         height=200>
    <br>
    <script language="JavaScript">
    <!--
    document.write(document.circle.height, " pixels.");
    -->
    </script>
    </html>


Image.hspace

The hspace property specifies the number of extra pixels that should appear on the left and right of the image.

This property can only be set by the HSPACE attribute of the tag.



<html>
    <head>
    <title>Example of hspace property</title>
    </head>
    Text to left of image.
    <img name="circle" src="http://www.wbex.ru/style/logo.png" HSPACE=100>
    Text to right of image.<br>
    <script language="JavaScript">
    <!--
    document.write(document.circle.hspace);
    -->
    </script>
    </html>


Image load onerror event (IE)

<html>
    <head>
        <title>Image Error Test</title>
    </head>
    <body>
        <P>The image below attempts to load a file that doesn"t exist.</p>
        <img src="doesNotExist.gif" onerror="alert("An error occurred loading the image.")" />
    </body>
</html>


Image.lowsrc

The lowsrc property specifies the URL of an alternate image to use on low-resolution displays. This property can only be set by the LOWSRC attribute of the tag.



<html>
    <head>
    <title>Example of lowsrc property</title>
    </head>
    <img name="circle"
         src="http://www.wbex.ru/style/logo.png"
         LOWsrc="http://www.wbex.ru/style/logo.png">
    <br>
    <script language="JavaScript">
    <!--
    document.write("<i><b>",document.circle.lowsrc,"</b></i>");
    -->
    </script>
    </html>


Image.name

The name property specifies the name of the image.

This property can only be set by the NAME attribute of the tag.



<html>
    <head>
    <title>Example of name property</title>
    </head>
    <img name="circle" src="http://www.wbex.ru/style/logo.png">
    <br>
    <script language="JavaScript">
    <!--
    document.write(document.circle.name);
    -->
    </script>
    </html>


Image.src

The src property specifies the URL of the image. This property can only be set by the SRC attribute of the tag.



<html>
    <head>
    <title>Example of src property</title>
    </head>
    <img name="circle" src="http://www.wbex.ru/style/logo.png"><br>
    <script language="JavaScript">
    <!--
    document.write("<i><b>",document.circle.src,"</b></i>");
    -->
    </script>
    </html>


Image substitute

<html>
<head>
<title>A Simple Page</title>
<script language="JavaScript">
<!--
if (document.images)
{
    img1 = new Image;
    img2 = new Image;
    img1.src = "http://www.wbex.ru/style/logo.png";
    img2.src = "img2.gif";
}
else
{
    img1 = "";
    img2 = "";
    document.imgSwap = "";
}
//  -->
</script>
</head>
<body>
<a href="http://www.wbex.ru" onMouseover="document.imgSwap.src = img2.src" onMouseout="document.imgSwap.src = img1.src">
<img src="http://www.wbex.ru/style/logo.png" name="imgSwap" border="0" width=100 height=100>
</a>
</body>
</html>


Image.vspace

The vspace property specifies the number of extra pixels that should appear on the top and bottom of the image.

This property can only be set by the VSPACE attribute of the tag.



<html>
    <head>
    <title>Example of vspace property</title>
    </head>
    Text at top of image.<br>
    <img name="circle" src="http://www.wbex.ru/style/logo.png" VSPACE=100><br>
    Text at bottom of image.<br>
    <script language="JavaScript">
    <!--
    document.write(document.circle.vspace);
    -->
    </script>
    </html>


Image.width

The width property specifies the width of the image in pixels.

This property can only be set by the WIDTH attribute of the tag.



<html>
    <head>
    <title>Example of width property</title>
    </head>
    <img name="circle"
         src="http://www.wbex.ru/style/logo.png"
         width=150>
    <br>
    <script language="JavaScript">
    <!--
    document.write(document.circle.width, " pixels.");
    -->
    </script>
    </html>


Replace an Image under mouse event (onMouseOver, onMouseOut)

<HTML>
<HEAD>
</HEAD>
<BODY>
Pass your mouse over a pattern!
</H2>
<TABLE cellpadding=5 cellspacing=10>
<TR><TD>
<IMG src="white.gif" height=100 width=175 border=0>
</TD>
<TD>
<IMG src="1.gif" height=75 width=75 border=2 onMouseOver="document.images[0].src="1.gif"";
onMouseOut="document.images[0].src="2.gif";">
</TD>
<TD>
<IMG src="2.gif" height=75 width=75 border=2
onMouseOver="document.images[0].src="2.gif";"
onMouseOut="document.images[0].src="3.gif";">
</TD>
<TD>
<IMG src="4.gif" height=75 width=75 border=2
onMouseOver="document.images[0].src="4.gif";"
onMouseOut="document.images[0].src="5.gif";">
</TD>
<TD>
<IMG src="6.gif" height=75 width=75 border=2
onMouseOver="document.images[0].src="6.gif";"
onMouseOut="document.images[0].src="7.gif";">
</TD>
</TR>
</TABLE>
</BODY>
</HTML>


Slide Show

<HTML>
<HEAD>
<TITLE>Slide Show</TITLE>
</HEAD>
<BODY bgcolor=black text=white>
<SCRIPT>
var picArray = new Array("",1.jpg", "2.jpg", "3.jpg", "4.jpg","5.jpg","6.jpg","7.jpg","8.jpg","9.jpg","10.jpg");
var picIndex = 1;
var timeOutId;
function inOrder() {
   showPic(picIndex);   
   picIndex ++;
   if (picIndex > 10) 
       picIndex = 1;
   status = picIndex;
   timeOutId=setTimeout("inOrder();",1000);
}
function showRandom() {
   picIndex = Math.floor(Math.random() * 11);
   if (picIndex == 0)
      picIndex = 1;
   showPic(picIndex);   
   status = picIndex;
   timeOutId=setTimeout("showRandom();",1000);
}
function showPic(i) {
   document.images[0].src=picArray[i];
}
</SCRIPT>
<H1>View a slide show!</H1>
<FORM>
<TABLE>
<TR><TD>
<INPUT type=button value="Show in Order" name=theButton onClick="inOrder();">
</TD><TD>
<INPUT type=button value="Random and Repeat" name=theButton onClick="showRandom();">
</TD><TD>
<INPUT type=button value="Stop" name=theButton onClick="clearTimeout(timeOutId);">
</TD></TR>
</TABLE><BR>
</FORM>
<IMG name=slideshow src="6.jpg" width=500 border=5>
</BODY>
</HTML>