带有图像的Javascript鼠标悬停

Question

^Here's my problem^

I want the button «Generelt» (Generally in English) to be on the same line as all the others one (Startside, Nyheter, Fakta, Medlem etc.). I didn't fint out how I do that, so my question is simple how do I do that? I also want the «Generelt»-image to be in the same size as the «Donér» (Donate) button, but when the second image comes (where you can choose page) I want it to be in the size it is now, that would say the image switch/change size when you put your mouse on the image, but I still want it all on the same line.

Here's the source in question:

<A HREF="default.php"
   onMouseOver="hiLite('img01','startside2')"
   onMouseOut="hiLite('img01','startside1')"><IMG SRC="startside1.gif" WIDTH="124" HEIGHT="28" BORDER="0" ALT="" NAME="img01"></A>

<A HREF="nyheter.htm"
   onMouseOver="hiLite('img02','nyheter2')"
   onMouseOut="hiLite('img02','nyheter1')"><IMG SRC="nyheter1.gif" WIDTH="87" HEIGHT="28" BORDER="0" ALT="" NAME="img02"></A>

<A HREF="fakta.htm"
   onMouseOver="hiLite('img03','fakta2')"
   onMouseOut="hiLite('img03','fakta1')"><IMG SRC="fakta1.gif" WIDTH="78" HEIGHT="28" BORDER="0" ALT="" NAME="img03"></A>

<A HREF="medlem.htm"
   onMouseOver="hiLite('img04','medlem2')"
   onMouseOut="hiLite('img04','medlem1')"><IMG SRC="medlem1.gif" WIDTH="86" HEIGHT="28" BORDER="0" ALT="" NAME="img04"></A> 

<SCRIPT LANGUAGE="javascript"><!--
document.write("<P><A HREF=\"javascript:nada()\"><IMG SRC=\""+picture_source+"\" width=124 height=76 NAME=\"img05\" border=0 USEMAP=\"#dir1\"></A>");
   //--></SCRIPT>
</SCRIPT>
<NOSCRIPT>
   <IMG SRC="generelt2.gif" WIDTH="124" HEIGHT="28" BORDER="0" USEMAP="#dir2" ALT="Directory: Home-Mail-Links">
</NOSCRIPT>

How would I do this?

EDIT: How would I make a display: inline-block and where should I put it? I need it so that I can have it on the same line, as said before.

Full site here: http://christofferhn.comoj.com/help.htm

Answer 1

A paragraph is a block-level element, which will naturally drop to a new line. You need to use a span as a wrapper, or apply display: inline-block to the element you do use.

I'd reconsider your approach here. It's very non-standard, which means it'll be confusing for users, and it's probably not very accessible to those with handicaps at all.

Answer 2

Drop the <P> element inside the document.write and you will probably get what you want.

I have to agree with isherwood though, the way that you are setting up your website is very non-standard and you should very much rethink it.