• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint

Moving Images

Here’s another way to work with images—you can move them around in a web page, repositioning them where you want them. Normally, the browser handles the flow and placement of images in the page, but you can specify the exact location of images using cascading styles (which we’ll see more of in Chapter 21). Here’s an example that changes the left and top styles of an image when you click a button, moving the image (again, you’ll need version 6+ if you’re using Netscape Navigator to work with styles this way):

(Listing 15-09.html on the web site)

<HTML> 
    <HEAD> 
        <TITLE>Moving Images</TITLE> 
        <SCRIPT LANGUAGE="JavaScript"> 
            <!--
            function mover()
					{
					document.getElementById("div1").style.left = "150"
					document.getElementById("div1").style.top = "200"
					} 
            // --> 
        </SCRIPT> 
    </HEAD> 

    <BODY> 
        <H1>Moving Images</H1> 
        <DIV ID="div1" STYLE="POSITION:ABSOLUTE; LEFT:10; TOP:180; WIDTH:240; HEIGHT:300"> 
           <IMG HEIGHT = "72" WIDTH="216" SRC="image2.jpg"> 
        </DIV> 
        <DIV STYLE=”POSITION:ABSOLUTE; LEFT:120; TOP:100; WIDTH:240; HEIGHT:250”> 
            <IMG HEIGHT = "72" WIDTH="216" SRC="image1.jpg"> 
        </DIV> 
        <FORM> 
            <INPUT TYPE="BUTTON" ONCLICK="mover()" VALUE="Click Me!"> 
        </FORM> 
    </BODY> 
</HTML> 

					  


PREVIEW

                                                                          

Not a subscriber?

Start A Free Trial


  
  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint