Topic: Adding sprite buttons to a custom menu?

[Swifty550]

I used an HTML block to create a custom menu, eg;

Code: [Select]

<div class="smalltext"><font  size="1"><b>Navigation</b></font><br>
<hr>
<img src="/menuimages/menu.gif"/> <font size="2"><a href="/">Home</a></font><br>
<img src="/menuimages/menu.gif"/> <font size="2"><a href="index.php?page=hmm">Hmm</a></font><br>


<br>
<font  size="1"><b>About</b></font><br>
<hr>


</div>
I want to replace the link with active/hover features of a button. How would I go about this if possible?

Thanks.

[Chen Zhen]

You will need to use event handlers to call javascript functions that produce the desired effect.
ref. http://www.w3schools.com/jsref/dom_obj_event.asp

Also font tags are deprecated and you will need to possibly use span tags with style attributes.


 

[Swifty550]

You will need to use event handlers to call javascript functions that produce the desired effect.
ref. http://www.w3schools.com/jsref/dom_obj_event.asp

Also font tags are deprecated and you will need to possibly use span tags with style attributes.

Hey thanks, could you give me an idea on how to start? I have completely no idea.

[Chen Zhen]

Imo use a custom php block instead. You can still echo all the html & javascript you need and it gives you more control over what you can do with the block.


In this example I did not bother with an actual javascript function but if you wanted it to do more then you can opt it.
This will give you a home button that changes on mouseover & mouseout.

Custom PHP Block:

Code: [Select]

global $boardurl, $scripturl;
echo '
<span>
<a href="'.$boardurl.'" onMouseover="document.changeMyImage1.src = \'http://www.dancarmel.com/cs/images/stellent/home3.gif\';" onMouseout="document.changeMyImage1.src = \'http://www.onlinetradesmen.ie/Portals/0/images/icons/120.png\';">
<img id="changeMyImage1" src="http://www.onlinetradesmen.ie/Portals/0/images/icons/120.png" style="height:50px;width:50px;" alt="" />
</a>
<a href="'.$scripturl.'?page=hmm" onMouseover="document.changeMyImage2.src = \'http://icongal.com/gallery/image/289490/hmm_thinking_skeptical.png\';" onMouseout="document.changeMyImage2.src = \'http://icongal.com/gallery/image/289469/happy.png\';">
<img id="changeMyImage2" src="http://icongal.com/gallery/image/289469/happy.png" style="height:50px;width:50px;" alt="" />
</a>
</span>';

... imo use images from your own site as the above is just an example.

ie.

Code: [Select]

global $boardurl, $scripturl, $settings;
$spacing = '5px';

echo '
<div style="overflow:hidden">
<span>
<a href="'.$boardurl.'" onMouseover="document.changeMyImage1.src = '.$settings['default_theme_url'].'\'/images/my_home_button2.png\';" onMouseout="document.changeMyImage1.src = '.$settings['default_theme_url'].'\'/images/my_home_button1.png\';">
<img id="changeMyImage1" src="'.$settings['default_theme_url'].'/images/my_home_button1.png" style="height:50px;width:50px;" alt="" />
</a>
</span>
<span style="padding-left:'.$spacing.';">
<a href="'.$scripturl.'?page=hmm" onMouseover="document.changeMyImage2.src = '.$settings['default_theme_url'].'\'/images/hmm_button2.png\';" onMouseout="document.changeMyImage2.src = '.$settings['default_theme_url'].'\'/images/hmm_button1.png\';">
<img id="changeMyImage2" src="'.$settings['default_theme_url'].'/images/hmm_button1.png" style="height:50px;width:50px;" alt="" />
</a>
</span>
</div>';

The code shown directly above has all images located in Themes/default/images & will allow you to control the spacing between the links/buttons.
my_home_button1.png
my_home_button2.png
hmm_button1.png
hmm_button2.png

.. add more links & images by duplicating the second set of open/close span tag (then edit it/them) and add it after the second closing span (prior to the closing div). Remember to change changeMyImage2 to 3, 4, 5, etc. etc. so it knows which image id to alter in each case.

[Chen Zhen]

I'll make it even easier for you.
With the code shown below you only need to adjust the spacing, image dimensions & 2 arrays containing the images + pages.

Horizontal buttons:

Code: [Select]

global $boardurl, $scripturl, $settings;

/* Set space between buttons */
$spacing = '5px';

/* Images height & width */
$width = '50px';
$height = '50px';

/* Home button: image1, image2 */
$home = array('my_home_button1.png', 'my_home_button2.png');

/* All other buttons: image1, image2, page link */
$buttons = array('Page1' => array('Page1_image1.png', 'Page1_image2.png', 'page=myPage1'), 'Page2' => array('Page2_image1.png', 'Page2_image2.png', 'page=myPage2'));

/* Display the buttons/links */
echo '
<div style="overflow:hidden">
<span>
<a href="'.$boardurl.'" onMouseover="document.changeMyHome.src = \''.$settings['default_theme_url'].'/images/'.$home[1].'\';" onMouseout="document.changeMyHome.src = \''.$settings['default_theme_url'].'/images/'.$home[0].'\';" style="text-decoration: none;">
<img id="changeMyHome" src="'.$settings['default_theme_url'].'/images/'.$home[0].'" style="height:'.$height.';width:'.$width.';" alt="Home" />
</a>
</span>';

foreach ($buttons as $button => $image)
{
echo '
<span style="padding-left:'.$spacing.';">
<a href="'.$scripturl.'?'.$image[2].'" onMouseover="document.changeMy'.$button.'.src = \''.$settings['default_theme_url'].'/images/'.$image[1].'\';" onMouseout="document.changeMy'.$button.'.src = \''.$settings['default_theme_url'].'/images/'.$image[0].'\';" style="text-decoration: none;">
<img id="changeMy'.$button.'" src="'.$settings['default_theme_url'].'/images/'.$image[0].'" style="height:'.$height.';width:'.$width.';" alt="'.$button.'" />
</a>
</span>';
}

echo '
</div>';


[Swifty550]

Hi thanks - how would I make my links vertical and not horizontal?

Thanks.

[Chen Zhen]

Vertical buttons:

Code: [Select]

global $boardurl, $scripturl, $settings;

/* Set space between buttons */
$style = 'padding-left:0px;';

/* Images height & width */
$width = '50px';
$height = '50px';

/* Home button: image1, image2 */
$home = array('my_home_button1.png', 'my_home_button2.png');

/* All other buttons: image1, image2, page link */
$buttons = array('Page1' => array('Page1_image1.png', 'Page1_image2.png', 'page=myPage1'), 'Page2' => array('Page2_image1.png', 'Page2_image2.png', 'page=myPage2'));

/* Display the buttons/links */
echo '
<div style="overflow:hidden">
<div style="'.$style.'">
<a href="'.$boardurl.'" onMouseover="document.changeMyHome.src = \''.$settings['default_theme_url'].'/images/'.$home[1].'\';" onMouseout="document.changeMyHome.src = \''.$settings['default_theme_url'].'/images/'.$home[0].'\';" style="text-decoration: none;">
<img id="changeMyHome" src="'.$settings['default_theme_url'].'/images/'.$home[0].'" style="height:'.$height.';width:'.$width.';" alt="Home" />
</a>
</div>';

foreach ($buttons as $button => $image)
{
echo '
<div style="'.$style.'">
<a href="'.$scripturl.'?'.$image[2].'" onMouseover="document.changeMy'.$button.'.src = \''.$settings['default_theme_url'].'/images/'.$image[1].'\';" onMouseout="document.changeMy'.$button.'.src = \''.$settings['default_theme_url'].'/images/'.$image[0].'\';" style="text-decoration: none;">
<img id="changeMy'.$button.'" src="'.$settings['default_theme_url'].'/images/'.$image[0].'" style="height:'.$height.';width:'.$width.';" alt="'.$button.'" />
</a>
</div>';
}

echo '
</div>';

Imo opt no body for your block.
You can change/add to the style variable for ie. positioning.
ie. for centering:

Code: [Select]

$style = 'text-align:center;';


[Swifty550]

Thank you very much!

[AngelinaBelle]

Does that solve it?
Is it ok to hit the "Topic Solved" button?