image botton

**sierra mist** · 10-21-2007 03:27 PM

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?

**scragar** · 10-21-2007 03:36 PM

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.

**sierra mist** · 10-21-2007 04:17 PM

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

**scragar** · 10-21-2007 04:22 PM

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>

**scragar** · 10-21-2007 05:22 PM

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.

**sierra mist** · 10-21-2007 09:39 PM

thanks for the tips and scripts still playing around with your script trying to figure it out, i realy close i can feel it!

**sierra mist** · 10-21-2007 10:49 PM

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!

**scragar** · 10-21-2007 11:01 PM

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

**sierra mist** · 10-21-2007 11:09 PM

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?

**sierra mist** · 10-21-2007 11:50 PM

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

**scragar** · 10-22-2007 10:37 AM

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.

**sierra mist** · 10-22-2007 06:09 PM

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: image botton

Thread Tools

Display

Hybrid View

image botton

got it!!

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions