The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

How to get two pictures to align side by side?

View previous topic View next topic Go down

Solved How to get two pictures to align side by side?

Post by jarn on April 16th 2014, 12:11 am

Does anyone know how to get two pictures to align side by side for this widget? My code is.

Code:
<img id="showperson" style="border: 0px solid black; width: 152px; height: 232px;" src="http://i.imgur.com/e5jPp9q.png" align="middle" border="0" /> <script type="text/javascript">
<!--
// copyright 1998 Idocs, Inc. http://www.idocs.com/tags/
// Distribute this script freely, but please keep this
// notice with the code.

// var image information object
var mloi=new Object();

// set the image for swapping
function setswap()
{
if (! document.images)return;
var imgInfo=new Object();
imgInfo.defaultImg = new Image();
imgInfo.defaultImg.src = document.images[arguments[0]].src;
imgInfo.opts = new Object();
for (var i=1; i < arguments.length; i=i+2)
{
imgInfo.opts[arguments[i]]=new Image();
imgInfo.opts[arguments[i]].src = arguments[i+1];
}
mloi[arguments[0]] = imgInfo;
}

// set up the link for swapping
function swap(link,imgName,optName)
{
if (! document.images)return;
if (! link.swapReady)
{
link.imgName = imgName;
link.onmouseout = swapBack;
link.swapReady = true;
}
document.images[imgName].src=mloi[imgName].opts[optName].src;
}

function swapBack()
{document.images[this.imgName].src=mloi[this.imgName].defaultImg.src}

//-->
</script> <script type="text/javascript">
setswap("showperson",
'elroy',
'http://i.imgur.com/aiB3oPE.png',
'michel',
'http://i.imgur.com/8kZW6gt.png');
//
</script><br /><br /><a onmouseover="swap(this,'showperson','elroy')" href="http://wamidnight.forumotion.co.uk/u1"><img alt="Owner" style="border: 0px black solid; height: 82px; width: 42px;" src="http://i.imgur.com/JOqyhN5.png" border="0" /></a><br /> <a onmouseover="swap(this,'showperson','michel')" href="http://wamidnight.forumotion.co.uk/u36"><img alt="Owner" style="border: 0px black solid; height: 82px; width: 42px;" src="http://i.imgur.com/RiOn4Uc.png" border="0" /></a><br />

Everything looks good except the two images seem to be stacking on top of each other. I need them to be side by side.

jarn
Forumember

Posts : 80
Reputation : 1
Language : English

http://cwentertainment.forummotion.com/

Back to top Go down

Solved Re: How to get two pictures to align side by side?

Post by Pizza Boi on April 17th 2014, 8:37 am

Hi Very Happy

You can declare an ID for the bottom picture and then you can style it with a position code such as:

Code:
#this example {
  position: relative or absolute;
  top: 18px;
  right: 10px;
}

My estimation might be off so please adjust it to your liking. Phone view and PC view aren't exactly the same...

Regards,
Pizza Boi

Pizza Boi
Hyperactive

Male Posts : 2016
Reputation : 160
Language : French
Location : Pizza Hut!

http://redlustempire.forumtl.com/

Back to top Go down

Solved Re: How to get two pictures to align side by side?

Post by jarn on April 17th 2014, 7:28 pm

I got the two pictures to align side by side, but the hover doesn't work anymore.

Code:
<img id="showperson" style="border: 0px solid black; width: 152px; height: 232px;" src="http://i.imgur.com/e5jPp9q.png" align="middle" border="0" /> <script type="<img id=" showperson"="" style="border: 0px solid black; width: 152px; height: 232px;" src="http://i.imgur.com/e5jPp9q.png" align="middle" border="0"> <script type="text/javascript">
<!--
// copyright 1998 Idocs, Inc. http://www.idocs.com/tags/
// Distribute this script freely, but please keep this
// notice with the code.

// var image information object
var mloi=new Object();

// set the image for swapping
function setswap()
{
if (! document.images)return;
var imgInfo=new Object();
imgInfo.defaultImg = new Image();
imgInfo.defaultImg.src = document.images[arguments[0]].src;
imgInfo.opts = new Object();
for (var i=1; i < arguments.length; i=i+2)
 {
 imgInfo.opts[arguments[i]]=new Image();
 imgInfo.opts[arguments[i]].src = arguments[i+1];
 }
mloi[arguments[0]] = imgInfo;
}

// set up the link for swapping
function swap(link,imgName,optName)
{
if (! document.images)return;
if (! link.swapReady)
 {
 link.imgName    = imgName;
 link.onmouseout = swapBack;
 link.swapReady  = true;
 }
document.images[imgName].src=mloi[imgName].opts[optName].src;
}

function swapBack()
 {document.images[this.imgName].src=mloi[this.imgName].defaultImg.src}

//-->
</script> <script type="text/javascript">
setswap("showperson",
'elroy',
'http://i.imgur.com/aiB3oPE.png',
'michel',
'http://i.imgur.com/8kZW6gt.png');
//
</script><br />
<p style="text-align:center">
   <strong><span style="text-decoration: underline; font-size:10px;">Administrators</span></strong>
</p><br />
<div style="position: relative; left: 30px;">
    <a onmouseover="swap(this,'showperson','elroy')" href="http://wamidnight.forumotion.co.uk/u1"><img alt="Owner" style="position: relative; border: 0px black solid; height: 82px; width: 42px float: left; right: 2px;" src="http://i.imgur.com/JOqyhN5.png" align="left" border="0" /></a><a onmouseover="swap(this,'showperson','michel')" href="http://wamidnight.forumotion.co.uk/u36"><img alt="Owner" style="position: relative; border: 0px black solid; height: 82px; width: 42px; float: left; left: 2px;" src="http://i.imgur.com/RiOn4Uc.png" align="left" border="0" /></a>
</div><br />

That is the new code.

jarn
Forumember

Posts : 80
Reputation : 1
Language : English

http://cwentertainment.forummotion.com/

Back to top Go down

Solved Re: How to get two pictures to align side by side?

Post by Pizza Boi on April 17th 2014, 8:27 pm

Hi Very Happy

In the beginning of the code where it says: <script type="<img src.. Please delete the script type portion and then declare </img> after tje image code. You actually mixed it a bit wrong Smile.

Anyway, if that doesn't work, Imma try to look at it this Saturday as I cannot access a Pc by today.

Regards,
Pizza Boi

Pizza Boi
Hyperactive

Male Posts : 2016
Reputation : 160
Language : French
Location : Pizza Hut!

http://redlustempire.forumtl.com/

Back to top Go down

Solved Re: How to get two pictures to align side by side?

Post by jarn on April 19th 2014, 2:58 am

That worked. Thanks! Solved!

jarn
Forumember

Posts : 80
Reputation : 1
Language : English

http://cwentertainment.forummotion.com/

Back to top Go down

Solved Re: How to get two pictures to align side by side?

Post by Ange Tuteur on April 19th 2014, 3:44 am

Topic solved and archived

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2684
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum