www.webdeveloper.com
Results 1 to 12 of 12

Thread: image botton

Hybrid View

  1. #1
    Join Date
    Oct 2007
    Posts
    18

    Lightbulb image botton

    im making a windows vista type thing to run on my psp's internet browser and im having a little troble heres the code:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Windows vista</title>
    <script language="JavaScript" type="text/JavaScript">
    <!--
    function MM_reloadPage(init) {  //reloads the window if Nav4 resized
      if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
        document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
      else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
    }
    <html lang="en">
    <head>
    <title>toggle</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    
    <script type="text/javascript">
    function toggle(myId) {
    var o = document.getElementById(myId);
    o.className=(o.className=='show')? 'hide' : 'show';
    }
    </script>
    
    <style type="text/css">
    .show {visibility:visibile;}
    .hide {visibility:hidden;}
    </style>
    MM_reloadPage(true);
    //-->
    </script>
    </head>
    
    <body>
    
    <div id="me" style="position:absolute; left:0px; top:6px; width:481; height:40; z-index:2; <img src="start menue.png" name="me" classname='hide'></div>
    
    <div id="Layer2" style="position:absolute; left:0px; top:0px; width:480; height:272; z-index:2; visibility: visible;"><img src="background.jpg" width="480" height="272"></div>
    <div id="Layer3" style="position:absolute; left:0px; top:238px; width:481; height:40; z-index:3; visibility: visible;"><img src="vista bottom.png" width="480" height="35"></div>
    
    <div id="Layer4" style="position:absolute; left:0px; top:242px; width:50; height:15; z-index:4; visibility: visible;">
           <A HREF
           onMouseOver="document.pic1.src='vista start light.png'"
           onMouseOut="document.pic1.src='vista start.png'";     
           onMouseDown="document.pic1.src='vista start click.png'">
           <IMG SRC="vista start.PNG" onclick="me.classname = "show";" width="58" height="46" border = "0" NAME="pic1"></div>
    
    </body>
    </html>
    im trying to make it so when you click on the "vista botton.png" it makes the "start menue.png" visible can someon plz tell me what im doing wrong?

  2. #2
    Join Date
    Jun 2003
    Location
    here
    Posts
    4,551


    really bad code there. you have the right idea, but you can't use double quotes in double quotes without exiting quotes accidentaly and causing a host of errors.
    and why do you check for ns4? it's not a major browser any more and if it's for your PSP checking then you don't need to check for it.

    and there is no good reason to use loose when writing a new page, loose should be used for legacy as much as possible, and nothing else.

    me is a microsoft jscript property that doesn't exist outside of IE(while "this" is universaly compatable). I would rewrite it for you, but I have a few more things to do before I have the time, if no-one has provided you with a fix in a while I shall fix it up.

  3. #3
    Join Date
    Oct 2007
    Posts
    18

    Exclamation

    thank you so much!! with the psp's browser it takes longer to load and if i did multiple pages it would be anouying when every time you click on somthing you heer a click, and im realy new to this, like i found out about it yesterday and wht you said just made me more confuzed than i was b4. and what is "ns4"? i did redo the code here it is:
    Code:
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Windows PSPortal</title>
    <script language="JavaScript" type="text/JavaScript">
    <!--
    function MM_reloadPage(init) {  //reloads the window if Nav4 resized
      if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
        document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
      else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
    }
    MM_reloadPage(true);
    //-->
    </script>
    </head>
    
    <body>
    
    <div id="layer5" style="position:absolute; left:0px; top:6px;; z-index:4; visibility: visible; visibility: hidden;"><img src="start menue.png" NAME ="pic2"></div>
    <div id="Layer2" style="position:absolute; left:0px; top:0px; width:480; height:272; z-index:2; visibility: visible;"><img src="background.jpg" width="480" height="272"></div>
    <div id="Layer3" style="position:absolute; left:0px; top:238px; width:481; height:40; z-index:3; visibility: visible;"><img src="vista bottom.png" width="480" height="35"></div>
    
    <div id="Layer4" style="position:absolute; left:0px; top:242px; width:50; height:15; z-index:4; visibility: visible;">
           <A HREF
           onMouseOver="document.pic1.src='vista start light.png'"
           onMouseOut="document.pic1.src='vista start.png'";     
           onMouseDown="document.pic1.src='vista start click.png'";
           onMouseDown="document.pic2.'piec2=visibility: visible'">
           <IMG SRC="vista start.PNG" width="58" height="46" border = "0" NAME="pic1"></div>
    
    </body>
    </html>
    tell me if this one is better
    Last edited by sierra mist; 10-21-2007 at 05:24 PM.

  4. #4
    Join Date
    Jun 2003
    Location
    here
    Posts
    4,551
    netscape 4. that's what the MM_reload page is for, very nasty function, I never liked using it.
    anyway, try this out and edit it to your liking, let me know if it stops working for some reason, but my tests showed that it was quite robust.
    HTML Code:
    <?xml version="1.0" encoding="utf-8"?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
            "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <title>Vista style page</title>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <meta http-equiv="Content-Style-Type" content="text/css" />
    <meta http-equiv="Content-Script-Type" content="text/javascript">
    <style>
    #BottomBar {
    	position: absolute;
    	bottom: 0px;
    	left: 0px;
    	width: 100%;
    	background-color: blue;
    }
    #MenuBar {
    	list-style: none;
    	display: none;
    	position: absolute;
    	bottom: 1.2em;
    	left: 0px;
    	margin: 0px;
    	background-color: black;
    	color: white;
    }
    #BeginButton {
    	margin-right: 10px;
    }
    </style>
    <script>
    var menubarout;
    function toggle(){
    	var o = document.getElementById(arguments[0]).style;
    	o.display = o.display == "block"?"none": "block";
    };
    </script>
    </head>
    <body>
    <ul id="MenuBar"
    	onmouseover="clearTimeout(menubarout);"
    	onmouseout="menubarout = setTimeout('toggle(\'MenuBar\')', 1000);">
    	<li>my menu.</li>
    	<li>my menu.</li>
    	<li>my menu.</li>
    	<li>my menu.</li>
    	<li>my menu.</li>
    	<li>my menu.</li>
    	<li>my menu.</li>
    	<li>my menu.</li>
    	<li>my menu.</li>
    	<li>my menu.</li>
    	<li>my menu.</li>
    	<li>last menu.</li>
    </ul>
    <div id="BottomBar"><img src="vista%20start.gif"
    	onmouseover="this.src ='vista%20start%20light.gif';"
    	onmouseout="this.src ='vista%20start.gif';"
    	onclick="toggle('MenuBar');"
    	id="BeginButton" /></div>
    </body>
    </html>

  5. #5
    Join Date
    Jun 2003
    Location
    here
    Posts
    4,551
    in responce to your edits I think I should point out that the one you have posted has 2 onmouse over event handlers for the anchor(a href). tags should be written in lower case and your still sniffing for ns4. your also now completely missing a doctype, which will cause problems with compliance between browsers.

    if you have an image for hovering, normal and clicked I made a quick edit to allow for it(personaly I didn't see the need for it). I'll post it here if you want.

  6. #6
    Join Date
    Oct 2007
    Posts
    18
    thanks for the tips and scripts still playing around with your script trying to figure it out, i realy close i can feel it!

  7. #7
    Join Date
    Oct 2007
    Posts
    18

    Thumbs up got it!!

    i finaly got it after about 4 hours of playing with it i figured it out!!!
    Code:
    <?xml version="1.0" encoding="utf-8"?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
            "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <title>psp Vista style page</title>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <meta http-equiv="Content-Style-Type" content="text/css" />
    <meta http-equiv="Content-Script-Type" content="text/javascript">
    </script>
    </head>
    <body>
    #BottomBar {
                <div id="BottomBar" style="position:absolute;
                left:0px;
                top:238px;
                width:481;
                height:40;
                z-index:3;
                visibility: visible;
                "><img src="vista bottom.png" width="480" height="35"></div>
    
    }
    #Background {
                <div id="Background" style="position:absolute;
                left:0px;
                top:0px;
                width:480;
                height:272;
                z-index:1;
                visibility: visible;">
                <img src="background.jpg" width="480" height="272"></div>
    
    }
    #MenuBar {
    	<div id="MenuBar" style="position:absolute;
            left:0px;
            top:6px; 
            z-index:4;
            display: none; 
            "><img src="start menue.png"></div>
    }
    #BeginButton {
    	margin-right: 10px;
    }
    </style>
    <script>
    var menubarout;
    function toggle(){
    	var o = document.getElementById(arguments[0]).style;
    	o.display = o.display == "block"?"none": "block";
    };
    </script>
    </head>
    <body>
    <ul id="MenuBar"
    	onmouseover="clearTimeout(menubarout);"
    	onmouseout="menubarout = setTimeout('toggle(\'MenuBar\')', 250);">
    </ul>
    <div id="BottomBar" style="position:absolute; left:0px; top:242px; width:50; height:15; z-index:4; visibility: visible;">
           <A HREF
           onMouseOver="document.pic1.src='vista start light.png'"
           onMouseOut="document.pic1.src='vista start.png'";     
           onMouseDown="document.pic1.src='vista start click.png'";
           onclick="toggle('MenuBar');"
           id="BeginButton" />
           <IMG SRC="vista start.PNG" width="58" height="46" border = "0" NAME="pic1"></div>
    
    </body>
    </html>


    tell me if i did anything wrong plz! but somthings wrong when i try it on my psp the start menue doesn't go up but on computer it does. i uploaded the images if you want to see it in action!
    Attached Images Attached Images

  8. #8
    Join Date
    Jun 2003
    Location
    here
    Posts
    4,551
    try the version attached.

    I have no idea how the PSP browser handles javascript, so it may be that it'll never be possible to get it to work. sorry 'bout that.


    oh, and you have tags in your CSS, everything between style tags should be CSS rules only(like background colour or text size) not tags. the tags go in your body.
    erk, actualy, you never started the CSS tags... check how I do the style effects compaired to how you do them. oh, and 1 last thing, you close a script tag that is never opened.



    when your done renaming the file to .html instead of .txt you should edit it and change the line:
    background-image: background.jpg;
    with
    background-image: url(background.jpg);

    sorry about that as well. :P
    Attached Files Attached Files
    Last edited by scragar; 10-22-2007 at 12:06 AM.

  9. #9
    Join Date
    Oct 2007
    Posts
    18
    oh i get it, i was doing it to the size of the psp screen but yours is uneversal thanks but y is the notepad document horizontal?
    Last edited by sierra mist; 10-22-2007 at 12:11 AM.

  10. #10
    Join Date
    Oct 2007
    Posts
    18
    i just found out how to make it work on the psp by editing the click down image to also have the start menue in it, by doing that i had to increece the size of all 3 vista start images and now when i move the mouse to that side of the screen the vista orb lights up, im just wondering how to use the image maps on the mouseover events if it is possible....

    http://www.w3schools.com/html/tryit....ryhtml_areamap

    the link is where i found out about the maps

  11. #11
    Join Date
    Jun 2003
    Location
    here
    Posts
    4,551
    sorry it took so long for the reply, I fell asleep.

    I don't thing image maps work well with mouseovers, but you shouldn't need it, cut the menu up and put it inside the div in smaller peices, that way you can position them where you want from there, and give them there own mouseover/out events.

  12. #12
    Join Date
    Oct 2007
    Posts
    18

    Wink

    acculy you can do the mouse over maps look!!!

    Code:
    <map id="planetmap" name="planetmap">
    
    <area shape="circle" 
    coords="0,250,40,20"  
           <A HREF
           onMouseOver="document.pic1.src='vista start light.png'";
           onMouseOut="document.pic1.src='vista start click(menu).png'";
           onMouseDown="document.pic1.src='vista start click.png'"; 
           <IMG SRC="vista start.PNG" width="58" height="46" border = "0" NAME="pic1"></div>
    </map>
    i figured it out all by myself!!

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles