Page 1 of 1

Hover buttons

Posted: Thu Jan 18, 2007 4:24 pm
by phelpsa
I have this code:

Code: Select all

function themeheader() {
    global $banners, $sitename;
    echo "<body bgcolor=\"#000000\" text=\"#000000\" link=\"0000ff\">"
	."<br>";
	ads(0);
	echo "<br>";
    echo "<table border=\"0\" cellpadding=\"0\" cellspacing=\"0\" width=\"840\" align=\"center\">\n"
	."<tr><td width=\"100%\">\n"
	."<table border=\"0\" cellpadding=\"0\" cellspacing=\"0\" width=\"840\">\n"
	."<tr><td width=\"100%\">\n"
	."<table border=\"0\" cellpadding=\"0\" cellspacing=\"0\" width=\"840\">\n"
	."<tr><td width=\"100%\" height=\"88\" bgcolor=\"#000000\">\n"
	."<table border=0 width=100% cellpadding=0 cellspacing=0><tr><td align=\"left\"><img border=\"0\" src=\"themes/AJP/images/AJPLogo.jpg\"></td><td align=\"center\"><img border=\"0\" src=\"themes/AJP/images/logocentre.jpg\"></td><td align=\"right\"><a href=\"index.php\"><img border=\"0\" src=\"themes/AJP/images/logo.jpg\" alt=\"Welcome to $sitename!\" hspace=\"20\"></a></td></tr></table></td></tr>\n"
	."<tr><td width=\"100%\" bgcolor=\"#000000\" height=\"19\" valign=\"bottom\">\n"
	."<a href=\"index.php\"><img border=\"0\" src=\"themes/AJP/images/home.gif\" width=\"140\" height=\"18\"></a>"
	."<a href=\"modules.php?name=Your_Account\"><img border=\"0\" src=\"themes/AJP/images/account.gif\" width=\"140\" height=\"18\"></a>"
	."<a href=\"modules.php?name=Downloads\"><img border=\"0\" src=\"themes/AJP/images/downloads.gif\" width=\"140\" height=\"18\"></a>"
	."<a href=\"modules.php?name=Submit_News\"><img border=\"0\" src=\"themes/AJP/images/submit.gif\" width=\"140\" height=\"18\"></a>"
	."<a href=\"modules.php?name=Topics\"><img border=\"0\" src=\"themes/AJP/images/topics.gif\" width=\"140\" height=\"18\"></a>"
	."<a href=\"modules.php?name=Top\"><img border=\"0\" src=\"themes/AJP/images/top10.gif\" width=\"140\" height=\"18\"></a>"
	."</td></tr><tr><td width=\"100%\" height=\"10\" bgcolor=\"#FF0000\">\n"
	."</td></tr></table>\n"
	."</td></tr><tr><td width=\"100%\"><table width='100%' cellspacing='0' cellpadding='0' border='0'><tr><td bgcolor='#FF0000'>\n";
    $public_msg = public_message();
    echo "$public_msg<br>";
    echo "</td></tr></table><table width=\"840\" cellpadding=\"0\" bgcolor=\"FF0000\" cellspacing=\"0\" border=\"0\">\n"
	."<tr valign=\"top\">\n"
	."<td><img src=\"themes/AJP/images/pixel.gif\" width=\"6\" height=\"1\" border=\"0\" alt=\"\"></td>\n"
	."<td width=\"138\" bgcolor=\"FF0000\" valign=\"top\">\n";
    blocks(left);
    echo "</td><td><img src=\"themes/AJP/images/pixel.gif\" width=\"10\" height=\"1\" border=\"0\" alt=\"\"></td><td width=\"100%\">\n";
}
and I want to make these buttons:

Code: Select all

."<a href=\"index.php\"><img border=\"0\" src=\"themes/AJP/images/home.gif\" width=\"140\" height=\"18\"></a>"
	."<a href=\"modules.php?name=Your_Account\"><img border=\"0\" src=\"themes/AJP/images/account.gif\" width=\"140\" height=\"18\"></a>"
	."<a href=\"modules.php?name=Downloads\"><img border=\"0\" src=\"themes/AJP/images/downloads.gif\" width=\"140\" height=\"18\"></a>"
	."<a href=\"modules.php?name=Submit_News\"><img border=\"0\" src=\"themes/AJP/images/submit.gif\" width=\"140\" height=\"18\"></a>"
	."<a href=\"modules.php?name=Topics\"><img border=\"0\" src=\"themes/AJP/images/topics.gif\" width=\"140\" height=\"18\"></a>"
	."<a href=\"modules.php?name=Top\"><img border=\"0\" src=\"themes/AJP/images/top10.gif\" width=\"140\" height=\"18\"></a>"
change image when they are hovered over.

I've found a JS that allows me to do it but i'm not sure howto integrate it into the PHP.

Could someone help?

Adam

Posted: Thu Jan 18, 2007 4:34 pm
by aaronhall
echo() the JS just like you would HTML -- just make sure to escape the double-quotes.

(By the way, that's an awful lot of HTML to be echoing to the browser. Consider using heredoc. Just makes things a little more readable.)

Posted: Thu Jan 18, 2007 4:39 pm
by Kieran Huggins
8O

Do you have an example page you could show?

Have you considered using CSS rollovers instead of javascript?

Posted: Thu Jan 18, 2007 4:57 pm
by phelpsa
Its a Php-nuke portal system template.

http://demo.phpnuke.org.pl/modules.php?name=Topics

Thats a demo site, and I want to make the buttons at the top change when you hover on them.

Adam

Posted: Thu Jan 18, 2007 5:10 pm
by Kieran Huggins
Easy (sloppy, lazy) way:

Code: Select all

<img border="0" src="themes/AJP/images/account.gif" width="140" height="18" onmouseover="this.src='themes/AJP/images/account_HOVER.gif'" onmouseout="this.src='themes/AJP/images/account.gif'">
Better (standards compliant, non-js dependent, no-flicker) way:

Make the image twice the height of the original, with the rollover state directly below the regular state. Then:

Code: Select all

#btnAccount{
   height:18px;
   width:140px;
   display:block;
   background:url(themes/AJP/images/account.gif) top left no-repeat;
}
#btnAccount:hover{
   background-position: 0 -18px;
}

Code: Select all

<a id="btnAccount" href="modules.php?name=Your_Account"></a>

Posted: Thu Jan 18, 2007 5:15 pm
by matthijs
Holy cow, is that a default template? 8O

I'd definitely take Kieran's advice and use the standard link hovers. Saves you from like 95% of the code.