shaam shaam - 4 months ago 18
Javascript Question

css display: inline not working

I am trying to display the each of the elements of 'headeri' in a horizontal manner, I've attached the js with it, if it's any help. I've tried to add the class and id name (both of them, in turn) to the css file using a tag and img tag (both of them, in turn), but to no avail.



var loaded = false;
function loadImages(){}
function react(img, plain){}

function loadImages()
{
img1plain = new Image(0,0);
img1plain.src = 'plain1.gif';
img1over = new Image(0,0);
img1over.src = 'over1.gif';

img2plain = new Image(0,0);
img2plain.src = 'plain2.gif';
img2over = new Image(0,0);
img2over.src = 'over2.gif';

img3plain = new Image(0,0);
img3plain.src = 'plain3.gif';
img3over = new Image(0,0);
img3over.src = 'over3.gif';

loaded = true;
}

function react(img, plain)
{
if (loaded)
{
if (plain) document[img].src = eval(img + "plain.src");
else document[img].src = eval(img + "over.src");
}
}

.headeri{

display: inline-block;
}

<header>
<A HREF="#top" class="headeri" onMouseOver="react('img1', false);return true" onMouseOut="react('img1', true);return true"><IMG SRC="plain1.gif" NAME="img1" WIDTH=150 HEIGHT=25 BORDER=0></A><BR>
<A HREF="#top" class="headeri"onMouseOver="react('img2', false);return true" onMouseOut="react('img2', true);return true"><IMG SRC="plain2.gif" NAME="img2" WIDTH=150 HEIGHT=25 BORDER=0></A><BR>
<A HREF="#top" class="headeri"onMouseOver="react('img3', false);return true" onMouseOut="react('img3', true);return true"><IMG SRC="plain3.gif" NAME="img3" WIDTH=150 HEIGHT=25 BORDER=0></A><BR>
</header>




Answer

Remove <BR> Tag

var loaded = false;
function loadImages(){}
function react(img, plain){}

function loadImages()
{
img1plain = new Image(0,0);
img1plain.src = 'plain1.gif';
img1over = new Image(0,0);
img1over.src  = 'over1.gif';

img2plain = new Image(0,0);
img2plain.src = 'plain2.gif';
img2over = new Image(0,0);
img2over.src  = 'over2.gif';

img3plain = new Image(0,0);
img3plain.src = 'plain3.gif';
img3over = new Image(0,0);
img3over.src  = 'over3.gif';

loaded = true;
}

function react(img, plain)
{
	if (loaded)
		{
		if (plain) document[img].src = eval(img + "plain.src");
		else document[img].src = eval(img + "over.src");
		}
}
.headeri{
	
	display: inline-block;
}
<header>
	<A HREF="#top" class="headeri" onMouseOver="react('img1', false);return true" onMouseOut="react('img1', true);return true"><IMG SRC="plain1.gif" NAME="img1" WIDTH=150 HEIGHT=25 BORDER=0></A>
	<A HREF="#top" class="headeri"onMouseOver="react('img2', false);return true" onMouseOut="react('img2', true);return true"><IMG SRC="plain2.gif" NAME="img2" WIDTH=150 HEIGHT=25 BORDER=0></A>
	<A HREF="#top" class="headeri"onMouseOver="react('img3', false);return true" onMouseOut="react('img3', true);return true"><IMG SRC="plain3.gif" NAME="img3" WIDTH=150 HEIGHT=25 BORDER=0></A>
</header>