JavaScript Tutorial/HTML Tags/img

Материал из Web эксперт
Версия от 11:24, 26 мая 2010; Admin (обсуждение | вклад) (1 версия)
(разн.) ← Предыдущая | Текущая версия (разн.) | Следующая → (разн.)
Перейти к: навигация, поиск

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

   <source lang="javascript">

<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()">

The image below attempts to load a file that doesn"t exist.

   <img/>

</body> </html></source>


Change image align

   <source lang="javascript">

<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></source>


Change image title

   <source lang="javascript">

<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></source>


Change link image in mouse in and mouse out

   <source lang="javascript">

<HTML> <HEAD> <SCRIPT language="JavaScript">

</SCRIPT> </HEAD> <BODY> <A HREF="#" onMouseOver="change_it("1")" onMouseOut="change_back("8")"><IMG SRC="1.gif" name="1" id="1"></A>

<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></source>

Change vspace for image

   <source lang="javascript">

<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" />

adsf

</body> </html></source>


Image

<p>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 



   <source lang="javascript">

<html> 

   <head>
   <title>Example of Image Object</title>
   <script language="JavaScript">
   
   </script>    
   </head>

   <form>
   <input type="button"
          value="Change Image"
          onClick="changeImage()">
   </form>
   <img name="magic" src="http://www.wbex.ru/style/logo.png">

   </html></source>

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.



   <source lang="javascript">

<html> 

   <head>
   <title>Example of border Property</title>
   </head>
   <img name="circle"
        src="http://www.wbex.ru/style/logo.png"
        border=10>
   

   <script language="JavaScript">
   
   </script>
   </html></source>

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.



   <source lang="javascript">

<html> 

   <head>
   <title>Example of complete Property</title>
   </head>
   <img name="circle" src="http://www.wbex.ru/style/logo.png">
   

   <script language="JavaScript">
   
   </script>
   </html></source>

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.



   <source lang="javascript">

<html> 

   <head>
   <title>Example of height property</title>
   </head>
   <img name="circle"
        src="http://www.wbex.ru/style/logo.png"
        height=200>
   

   <script language="JavaScript">
   
   </script>
   </html></source>

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.



   <source lang="javascript">

<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.

   <script language="JavaScript">
   
   </script>
   </html></source>

Image load onerror event (IE)

   <source lang="javascript">

<html> 

   <head>
       <title>Image Error Test</title>
   </head>
   <body>

The image below attempts to load a file that doesn"t exist.

       <img src="doesNotExist.gif" onerror="alert("An error occurred loading the image.")" />
   </body>

</html></source>


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.



   <source lang="javascript">

<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">
   

   <script language="JavaScript">
   
   </script>
   </html></source>

Image.name

The name property specifies the name of the image.

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



   <source lang="javascript">

<html> 

   <head>
   <title>Example of name property</title>
   </head>
   <img name="circle" src="http://www.wbex.ru/style/logo.png">
   

   <script language="JavaScript">
   
   </script>
   </html></source>

Image.src

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



   <source lang="javascript">

<html> 

   <head>
   <title>Example of src property</title>
   </head>
   <img name="circle" src="http://www.wbex.ru/style/logo.png">

   <script language="JavaScript">
   
   </script>
   </html></source>

Image substitute

   <source lang="javascript">

<html> <head> <title>A Simple Page</title> <script language="JavaScript">

</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></source>


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.



   <source lang="javascript">

<html> 

   <head>
   <title>Example of vspace property</title>
   </head>
   Text at top of image.

   <img name="circle" src="http://www.wbex.ru/style/logo.png" VSPACE=100>

   Text at bottom of image.

   <script language="JavaScript">
   
   </script>
   </html></source>

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.



   <source lang="javascript">

<html> 

   <head>
   <title>Example of width property</title>
   </head>
   <img name="circle"
        src="http://www.wbex.ru/style/logo.png"
        width=150>
   

   <script language="JavaScript">
   
   </script>
   </html></source>

Replace an Image under mouse event (onMouseOver, onMouseOut)

   <source lang="javascript">

<HTML> <HEAD> </HEAD> <BODY> Pass your mouse over a pattern! </H2>

<IMG src="white.gif" height=100 width=175 border=0>

<IMG src="1.gif" height=75 width=75 border=2 onMouseOver="document.images[0].src="1.gif""; onMouseOut="document.images[0].src="2.gif";">

<IMG src="2.gif" height=75 width=75 border=2 onMouseOver="document.images[0].src="2.gif";" onMouseOut="document.images[0].src="3.gif";">

<IMG src="4.gif" height=75 width=75 border=2 onMouseOver="document.images[0].src="4.gif";" onMouseOut="document.images[0].src="5.gif";">

<IMG src="6.gif" height=75 width=75 border=2 onMouseOver="document.images[0].src="6.gif";" onMouseOut="document.images[0].src="7.gif";">

</BODY> </HTML></source>


Slide Show

   <source lang="javascript">

<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>

View a slide show!

<FORM>

<INPUT type=button value="Show in Order" name=theButton onClick="inOrder();">

<INPUT type=button value="Random and Repeat" name=theButton onClick="showRandom();">

<INPUT type=button value="Stop" name=theButton onClick="clearTimeout(timeOutId);">


</FORM> <IMG name=slideshow src="6.jpg" width=500 border=5> </BODY> </HTML></source>

Источник — «http://wbex.ru/index.php?title=JavaScript_Tutorial/HTML_Tags/img&oldid=9055»