Kids

Can

JavaScript

<-----Back        Next --->

Images

You can easily insert images in your html pages.
With Javascript you can do some super dynamic stuff with your images.

example1:

How to insert an Image

This is an Image Tag.

 <img  
 src='  
 /pics/average%20dude.png 
 ' 
 /> 

The <img..../< tag has a src- attribute that tells the browser where to find the image.

Right click some of these pictures and copy their URL. Add them in Tryout table below, or paste them in the address bar to see where it leads you.
All URLs that start with http:// are full paths: Absolute URL. This path will always work.
All others are not full paths :Relative URL.This path will only work from the server that the picture is stored on



The Img tag......... .... "TryoutPanel1"
Insert a different src attribute to get a different picture. <img src="http://mrsbos.wikispaces.com/file/view/spiderman.jpg" />


Image Attributes
 function  
 resizeImg( 
 img 
 ) 
 { 


 img 
 . 
 style.width 
 = 
 "100px" 
 ; 
 } 

The attributes such as size and src of the images can be dynamically changed.



in the function                       in the tag

img.style.width='80px'..........style=" width:80px "......sets width

img.style.height='60px'.........style=" height:60px ".......sets height of img

img.src='/file/somePic.gif'......src=" /file/view/somePic.gif "....sets URL to the img

img.alt='lion '.................alt=" lion ".......alternative text if IMG cant be displayed

img.title='this lion is about to jump his prey'.......



Resize Images......... .... "TryoutPanel2"
<script > function bigImg(x) { x.style.height="126px"; x.style.width="156px"; } function normalImg(x) { x.style.height="63px"; x.style.width="78px"; } //....write another function to change another attribute of the img // add it to onmouseover(19) </script> <img onmouseover=" bigImg(this) " onmouseout=" normalImg(this) " style="height: 63px; width: 78px;" src=" /pics/average%20dude.png" /> <br> <br> <ul><li>write another function to change another attribute of the img(14)</li></ul>





Dynamically changing Image

example2:


 function  
 swapImg( 
 img 
 ) 
 { 


 img 
 . 
 src 
 = 
 "pics/afterLion.png" 
 ; 
 } 

If we change the src- attribute, the whole picture changes.


Dynamically change the Image......... .... "TryoutPanel3"
<script > function swapImg(x) { x.src="/pics/afterLion.png"; } </script> <img onmouseover="swapImg(this) " src="/pics/beforeLion.png" />




Background Images

The chicken is a background image to a button.

example1:




 style=" 
 background-image 
 : 
 url(.../normalChicken.gif) 


 background-size 
 : 
 200px 
 200px 
 " 
 ; 

The background-image and background-size style properties inside the button-tag give it an Img background.


 element 
 . 
 style 
 . 
 backgroundImage 
 = 
 " 
 url(/layingchicken.png) 
 " 
 ; 

This is the syntax to change these style properties inside a function .




Background Images......... .... "TryoutPanel4"
<script> function changeImg(id){ document.getElementById(id).style.backgroundImage="url(/pics/layingChicken.gif)"; } //........make a function that changes the backgroundSize </script> <button id="button" style=" width:200px; height:200px; background-image:url(/pics/normalChicken.gif); background-size:200px 200px " onclick="changeImg(this.id)" >click me! </button > <ul><li>Change background-size in the tag to 100px 100px (16)</li> <li>Make a function that changes the backgroundSize(6)</li></ul>




<-----Back        Next --->

This username already exists.

This username already exists.

Login or register to save your work.

User name field is empty.

Your username needs to be at least 7 characters long.

Your username can not contain any of the following characters: ",', <, > , < and whitespaces.

Please enter a correct email addresss .

This email address is not found in our database .

Your password needs to be at least 7 characters long.

login
username
password
forgot password
email
register
username
password
email