Networking | Hardware | Software | Multimedia | System | Unix&Linux | MBA

Home>>Hardware>>navigation button/image

navigation button/image

pj59
01-08-2006, 07:55 PM
I am trying to align the image with each button. When you move your mouse to the button...the image should display. Right now the image is display at the bottom...I would like to have the image display to the right of each button or below of each button. I really appreciate your help on this matter. :) Here is the code I created so far:

<html>


<HEAD>
<style type=http://codingforums.com/archive/index.php/"text/csshttp://codingforums.com/archive/index.php/">
<!--

.navbuttons a
{
color: #000099;
text-decoration: none;
background-color: #FFFFFF;
display: block;
text-align:center;
font:Arial, Helvetica, sans-serif;
width: 100px;
border-top: 1px solid #EEEEEE;
border-right: 1px solid #666666;
border-bottom: 1px solid #666666;
border-left: 1px solid #EEEEEE;
background-repeat: no-repeat;
}
.navbuttons a:hover, p.navbuttons a:active
{
background-color: #000099;
color: #FFFFFF;
background-repeat: no-repeat;
}
-->

</style>

<script language=http://codingforums.com/archive/index.php/"javascripthttp://codingforums.com/archive/index.php/" type=http://codingforums.com/archive/index.php/"text/javascripthttp://codingforums.com/archive/index.php/">
<!--
function showPreview(url, border, width, height, desc)
{
border = typeof(border) == http://codingforums.com/archive/index.php/"undefinedhttp://codingforums.com/archive/index.php/" ? 0 : border;
width = typeof(width) == http://codingforums.com/archive/index.php/"undefinedhttp://codingforums.com/archive/index.php/" ? 100 : width;
height = typeof(height) == http://codingforums.com/archive/index.php/"undefinedhttp://codingforums.com/archive/index.php/" ? 60 : height;
desc = typeof(desc) == http://codingforums.com/archive/index.php/"undefinedhttp://codingforums.com/archive/index.php/" ? http://codingforums.com/archive/index.php/"http://codingforums.com/archive/index.php/" : desc;
document.getElementById(http://codingforums.com/archive/index.php/"sphttp://codingforums.com/archive/index.php/").innerHTML = '<img src=http://codingforums.com/archive/index.php/"' + url + 'http://codingforums.com/archive/index.php/" border=http://codingforums.com/archive/index.php/"' + border + 'http://codingforums.com/archive/index.php/" width=http://codingforums.com/archive/index.php/"' + width + 'http://codingforums.com/archive/index.php/" height=http://codingforums.com/archive/index.php/"' + height + 'http://codingforums.com/archive/index.php/"><br>' + desc;
}
function clearPreview()
{
document.getElementById(http://codingforums.com/archive/index.php/"sphttp://codingforums.com/archive/index.php/").innerHTML = http://codingforums.com/archive/index.php/"http://codingforums.com/archive/index.php/";
}
//-->
</script>
</HEAD>

<BODY bgcolor=http://codingforums.com/archive/index.php/"#99CCFFhttp://codingforums.com/archive/index.php/">
<table width=20% border=http://codingforums.com/archive/index.php/"0http://codingforums.com/archive/index.php/" cellspacing=http://codingforums.com/archive/index.php/"10http://codingforums.com/archive/index.php/" cellpadding=http://codingforums.com/archive/index.php/"4http://codingforums.com/archive/index.php/">
<tr>
<td align=http://codingforums.com/archive/index.php/"lefthttp://codingforums.com/archive/index.php/" valign=http://codingforums.com/archive/index.php/"tophttp://codingforums.com/archive/index.php/" class=http://codingforums.com/archive/index.php/"navbuttonshttp://codingforums.com/archive/index.php/"><a href=http://codingforums.com/archive/index.php/"index.htmlhttp://codingforums.com/archive/index.php/" onMouseOver='showPreview(http://codingforums.com/archive/index.php/"eye6.jpghttp://codingforums.com/archive/index.php/", 0, 100);' onMouseOut=http://codingforums.com/archive/index.php/"clearPreview();http://codingforums.com/archive/index.php/" title=http://codingforums.com/archive/index.php/"Homehttp://codingforums.com/archive/index.php/">Home</a> </td>
</tr>

<tr>
<td align=http://codingforums.com/archive/index.php/"lefthttp://codingforums.com/archive/index.php/" valign=http://codingforums.com/archive/index.php/"tophttp://codingforums.com/archive/index.php/" class=http://codingforums.com/archive/index.php/"navbuttonshttp://codingforums.com/archive/index.php/"><a href=http://codingforums.com/archive/index.php/"aboutUs.htmlhttp://codingforums.com/archive/index.php/" onMouseOver='showPreview(http://codingforums.com/archive/index.php/"eye6.jpghttp://codingforums.com/archive/index.php/", 0, 100);' onMouseOut=http://codingforums.com/archive/index.php/"clearPreview();http://codingforums.com/archive/index.php/" title=http://codingforums.com/archive/index.php/"About Ushttp://codingforums.com/archive/index.php/">About Us</a></td>
</tr>

<td align=http://codingforums.com/archive/index.php/"lefthttp://codingforums.com/archive/index.php/" valign=http://codingforums.com/archive/index.php/"tophttp://codingforums.com/archive/index.php/" class=http://codingforums.com/archive/index.php/"navbuttonshttp://codingforums.com/archive/index.php/"><a href=http://codingforums.com/archive/index.php/"contactUs.htmlhttp://codingforums.com/archive/index.php/" onMouseOver='showPreview(http://codingforums.com/archive/index.php/"eye6.jpghttp://codingforums.com/archive/index.php/", 0, 100);' onMouseOut=http://codingforums.com/archive/index.php/"clearPreview();http://codingforums.com/archive/index.php/" title=http://codingforums.com/archive/index.php/"Contact Ushttp://codingforums.com/archive/index.php/">Contact Us</a>
</td></tr>

<td align=http://codingforums.com/archive/index.php/"lefthttp://codingforums.com/archive/index.php/" valign=http://codingforums.com/archive/index.php/"tophttp://codingforums.com/archive/index.php/" class=http://codingforums.com/archive/index.php/"navbuttonshttp://codingforums.com/archive/index.php/"><a href=http://codingforums.com/archive/index.php/"doctors.htmlhttp://codingforums.com/archive/index.php/" onMouseOver='showPreview(http://codingforums.com/archive/index.php/"eye6.jpghttp://codingforums.com/archive/index.php/", 0, 100);' onMouseOut=http://codingforums.com/archive/index.php/"clearPreview();http://codingforums.com/archive/index.php/" title=http://codingforums.com/archive/index.php/"Doctorshttp://codingforums.com/archive/index.php/">Doctors</a>
</td></tr>

<td align=http://codingforums.com/archive/index.php/"lefthttp://codingforums.com/archive/index.php/" valign=http://codingforums.com/archive/index.php/"tophttp://codingforums.com/archive/index.php/" class=http://codingforums.com/archive/index.php/"navbuttonshttp://codingforums.com/archive/index.php/"><a href=http://codingforums.com/archive/index.php/"theChoice.htmlhttp://codingforums.com/archive/index.php/" onMouseOver='showPreview(http://codingforums.com/archive/index.php/"eye6.jpghttp://codingforums.com/archive/index.php/", 0, 100);' onMouseOut=http://codingforums.com/archive/index.php/"clearPreview();http://codingforums.com/archive/index.php/" title=http://codingforums.com/archive/index.php/"The Choicehttp://codingforums.com/archive/index.php/">The Choice</a>
</td>

</tr>
</table>


<td width=http://codingforums.com/archive/index.php/"46%http://codingforums.com/archive/index.php/" height=http://codingforums.com/archive/index.php/"50http://codingforums.com/archive/index.php/">
<span id=http://codingforums.com/archive/index.php/"sphttp://codingforums.com/archive/index.php/" class=http://codingforums.com/archive/index.php/"txthttp://codingforums.com/archive/index.php/"></span>

</body>
</html>
vwphillips
01-08-2006, 09:13 PM
<html>


<HEAD>
<style type=http://codingforums.com/archive/index.php/"text/csshttp://codingforums.com/archive/index.php/">
<!--

.navbuttons a
{
color: #000099;
text-decoration: none;
background-color: #FFFFFF;
display: block;
text-align:center;
font:Arial, Helvetica, sans-serif;
width: 100px;
border-top: 1px solid #EEEEEE;
border-right: 1px solid #666666;
border-bottom: 1px solid #666666;
border-left: 1px solid #EEEEEE;
background-repeat: no-repeat;
}
.navbuttons a:hover, p.navbuttons a:active
{
background-color: #000099;
color: #FFFFFF;
background-repeat: no-repeat;
}
-->

</style>

<script language=http://codingforums.com/archive/index.php/"javascripthttp://codingforums.com/archive/index.php/" type=http://codingforums.com/archive/index.php/"text/javascripthttp://codingforums.com/archive/index.php/">
<!--
var pvobj;

function showPreview(obj,url, border, width, height, desc){
border=border||0;
width=width||100;
height=height||100;
desc=desc||'';
pvobj=document.getElementById('PreviewImage');
img=pvobj.getElementsByTagName('IMG')[0];
img.src=http://codingforums.com/archive/index.php/url;
img.width=width;
img.height=height;
pvobj.getElementsByTagName('DIV')[0].innerHTML=desc;
pvobj.style.left=(zxcPos(obj)[0]+obj.offsetWidth+5)+'px';
pvobj.style.top=(zxcPos(obj)[1])+'px';
pvobj.style.visibility='visible';
}

function clearPreview(){
pvobj.style.visibility='hidden';
}

function zxcPos(zxc){
zxcObjLeft = zxc.offsetLeft;
zxcObjTop = zxc.offsetTop;
while(zxc.offsetParent!=null){
zxcObjParent=zxc.offsetParent;
zxcObjLeft+=zxcObjParent.offsetLeft;
zxcObjTop+=zxcObjParent.offsetTop;
zxc=zxcObjParent;
}
return [zxcObjLeft,zxcObjTop];
}

//-->
</script>
</HEAD>

<BODY bgcolor=http://codingforums.com/archive/index.php/"#99CCFFhttp://codingforums.com/archive/index.php/">
<table width=20% border=http://codingforums.com/archive/index.php/"0http://codingforums.com/archive/index.php/" cellspacing=http://codingforums.com/archive/index.php/"10http://codingforums.com/archive/index.php/" cellpadding=http://codingforums.com/archive/index.php/"4http://codingforums.com/archive/index.php/">
<tr>
<td align=http://codingforums.com/archive/index.php/"lefthttp://codingforums.com/archive/index.php/" valign=http://codingforums.com/archive/index.php/"tophttp://codingforums.com/archive/index.php/" class=http://codingforums.com/archive/index.php/"navbuttonshttp://codingforums.com/archive/index.php/"><a href=http://codingforums.com/archive/index.php/"index.htmlhttp://codingforums.com/archive/index.php/" onMouseOver='showPreview(this,http://codingforums.com/archive/index.php/"http://www.vicsjavascripts.org.uk/StdImages/One.gifhttp://codingforums.com/archive/index.php/", 0, 100);' onMouseOut=http://codingforums.com/archive/index.php/"clearPreview();http://codingforums.com/archive/index.php/" title=http://codingforums.com/archive/index.php/"Homehttp://codingforums.com/archive/index.php/">Home</a> </td>
</tr>

<tr>
<td align=http://codingforums.com/archive/index.php/"lefthttp://codingforums.com/archive/index.php/" valign=http://codingforums.com/archive/index.php/"tophttp://codingforums.com/archive/index.php/" class=http://codingforums.com/archive/index.php/"navbuttonshttp://codingforums.com/archive/index.php/"><a href=http://codingforums.com/archive/index.php/"aboutUs.htmlhttp://codingforums.com/archive/index.php/" onMouseOver='showPreview(this,http://codingforums.com/archive/index.php/"http://www.vicsjavascripts.org.uk/StdImages/Two.gifhttp://codingforums.com/archive/index.php/", 0, 100);' onMouseOut=http://codingforums.com/archive/index.php/"clearPreview();http://codingforums.com/archive/index.php/" title=http://codingforums.com/archive/index.php/"About Ushttp://codingforums.com/archive/index.php/">About Us</a></td>
</tr>

<td align=http://codingforums.com/archive/index.php/"lefthttp://codingforums.com/archive/index.php/" valign=http://codingforums.com/archive/index.php/"tophttp://codingforums.com/archive/index.php/" class=http://codingforums.com/archive/index.php/"navbuttonshttp://codingforums.com/archive/index.php/"><a href=http://codingforums.com/archive/index.php/"contactUs.htmlhttp://codingforums.com/archive/index.php/" onMouseOver='showPreview(this,http://codingforums.com/archive/index.php/"http://www.vicsjavascripts.org.uk/StdImages/Three.gifhttp://codingforums.com/archive/index.php/", 0, 100);' onMouseOut=http://codingforums.com/archive/index.php/"clearPreview();http://codingforums.com/archive/index.php/" title=http://codingforums.com/archive/index.php/"Contact Ushttp://codingforums.com/archive/index.php/">Contact Us</a>
</td></tr>

<td align=http://codingforums.com/archive/index.php/"lefthttp://codingforums.com/archive/index.php/" valign=http://codingforums.com/archive/index.php/"tophttp://codingforums.com/archive/index.php/" class=http://codingforums.com/archive/index.php/"navbuttonshttp://codingforums.com/archive/index.php/"><a href=http://codingforums.com/archive/index.php/"doctors.htmlhttp://codingforums.com/archive/index.php/" onMouseOver='showPreview(this,http://codingforums.com/archive/index.php/"http://www.vicsjavascripts.org.uk/StdImages/Four.gifhttp://codingforums.com/archive/index.php/", 0, 100);' onMouseOut=http://codingforums.com/archive/index.php/"clearPreview();http://codingforums.com/archive/index.php/" title=http://codingforums.com/archive/index.php/"Doctorshttp://codingforums.com/archive/index.php/">Doctors</a>
</td></tr>

<td align=http://codingforums.com/archive/index.php/"lefthttp://codingforums.com/archive/index.php/" valign=http://codingforums.com/archive/index.php/"tophttp://codingforums.com/archive/index.php/" class=http://codingforums.com/archive/index.php/"navbuttonshttp://codingforums.com/archive/index.php/"><a href=http://codingforums.com/archive/index.php/"theChoice.htmlhttp://codingforums.com/archive/index.php/" onMouseOver='showPreview(this,http://codingforums.com/archive/index.php/"http://www.vicsjavascripts.org.uk/StdImages/Five.gifhttp://codingforums.com/archive/index.php/", 0, 100);' onMouseOut=http://codingforums.com/archive/index.php/"clearPreview();http://codingforums.com/archive/index.php/" title=http://codingforums.com/archive/index.php/"The Choicehttp://codingforums.com/archive/index.php/">The Choice</a>
</td>

</tr>
</table>


<td width=http://codingforums.com/archive/index.php/"46%http://codingforums.com/archive/index.php/" height=http://codingforums.com/archive/index.php/"50http://codingforums.com/archive/index.php/">
<span id=http://codingforums.com/archive/index.php/"sphttp://codingforums.com/archive/index.php/" class=http://codingforums.com/archive/index.php/"txthttp://codingforums.com/archive/index.php/"></span>
<div id=http://codingforums.com/archive/index.php/"PreviewImagehttp://codingforums.com/archive/index.php/" style=http://codingforums.com/archive/index.php/"position:absolute;visibility:hidden;http://codingforums.com/archive/index.php/" >
<img src=http://codingforums.com/archive/index.php/"http://www.vicsjavascripts.org.uk/StdImages/Blank.gifhttp://codingforums.com/archive/index.php/" >
<div style=http://codingforums.com/archive/index.php/"text-align:center;http://codingforums.com/archive/index.php/" ></div>
</div>
</body>

</html>
pj59
01-08-2006, 09:50 PM
Thanks vwphillips! That is exactly what I am looking for. :thumbsup: I really appreciated your help on this. :)
 

TOP

•Hyperthreading hurts s
•HP sharpens blade PC l
•Apple goes for Quad po
•Itanium gets scaled do

For more info

•Hyperthreading hurts s
•HP sharpens blade PC l
•problem with an ImageP
•Modifying a navigation
•convert text to intege
•Anyone knows to clear 
•Automatically generate
•document.getElementByI
•Hi question about stor
•Netscape Problems :-( 

News Archive

•Month and Year drop do
•navigation button/imag
•doubt in window.open()
•undo redo script 
•Mimick "View Source" w
•print Question 
•No-image representatio
•What's wrong with this
•Urgent help in Javascr
•Gurt Menu assistance 

Related stories:

•Month and Year drop down selection boxes
•doubt in window.open()
•undo redo script
•Mimick "View Source" with JavaScript
•print Question
•No-image representation

Copyright@2004-2005 www.zzcoke.com All Right Reserved

advanced web statistics