homepage Welcome to WebmasterWorld Guest from 54.167.75.155
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / HTML
Forum Library, Charter, Moderators: incrediBILL

HTML Forum

    
Center Image
Rain_Lover




msg:4105098
 11:22 am on Mar 26, 2010 (gmt 0)

Hi,

I created a simple slideshow:

<html>
<body>

<div>
<iframe src="image1.jpg" width="448" height="336" name="iframe_a">
</iframe>
</div>
<br>
<div>
<a href="image1.jpg" target ="iframe_a"><img src="image1.jpg" width="80" height="60"></a>
&nbsp;
<a href="image2.jpg" target ="iframe_a"><img src="image2.jpg" width="80" height="60"></a>
&nbsp;
<a href="image3.jpg" target ="iframe_a"><img src="image3.jpg" width="80" height="60"></a>
</div>

</body>
</html>


The problem is my images are of different sizes and they don't center in the iframe. How can I resolve the problem? Any suggestion is greatly appreciated!



Kind regards
Rain lover

[edited by: incrediBILL at 3:33 pm (utc) on Mar 26, 2010]
[edit reason] removed specifics, see TOS #13 [webmasterworld.com...] [/edit]

 

birdbrain




msg:4105124
 12:28 pm on Mar 26, 2010 (gmt 0)

Hi there Rain_Lover,

do it like this...

iframe page...


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="language" content="english">
<meta http-equiv="Content-Style-Type" content="text/css">

<title></title>
<style type="text/css">
iframe {
width:448px;
height:336px;
}
#links {
margin-top:18px;
}
#links a {
margin-right:12px;
}
#links a img {
width:80px;
height:60px;
}

</style>
<body>

<div>
<iframe src="[blue]image1.html[/blue]" name="iframe_a"></iframe>
</div>

<div id="links">
<a href="[blue]image1.html[/blue]" target ="iframe_a"><img src="image1.jpg" alt=""></a>
<a href="[blue]image2.html[/blue]" target ="iframe_a"><img src="image2.jpg" alt=""></a>
<a href="[blue]image3.html[/blue]" target ="iframe_a"><img src="image3.jpg" alt=""></a>
</div>

</body>
</html>


image1.html


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="language" content="english">
<meta http-equiv="Content-Style-Type" content="text/css">

<title></title>

<style type="text/css">
body {
padding:0;
margin:0;
}
img {
display:block;
width:448px;
height:336px;
}
</style>

</head>
<body>

<div>
<img src="image1.jpg" alt="">
</div>

</body>
</html>



image2.html


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="language" content="english">
<meta http-equiv="Content-Style-Type" content="text/css">

<title></title>

<style type="text/css">
body {
padding:0;
margin:18px 0 0 24px;
}
img {
display:block;
width:400px;
height:300px;
}
</style>

</head>
<body>

<div>
<img src="image2.jpg" alt="">
</div>

</body>
</html>



image3.html


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="language" content="english">
<meta http-equiv="Content-Style-Type" content="text/css">

<title></title>

<style type="text/css">
body {
padding:0;
margin:68px 0 0 74px;
}
img {
display:block;
width:300px;
height:200px;
}
</style>

</head>
<body>

<div>
<img src="image3.jpg" alt="">
</div>

</body>
</html>


birdbrain

Rain_Lover




msg:4105149
 1:00 pm on Mar 26, 2010 (gmt 0)

Hi birdbrain,

Thanks for the answer, but I can't create a single page for each image. I'm going to have a slideshow of 200 images and it can be very cumbersome and time-consuming.
Thanks for the suggestion, though! :-)

penders




msg:4105215
 2:54 pm on Mar 26, 2010 (gmt 0)

...but I can't create a single page for each image.


This is where a bit of server-side script (such as PHP) could be used to effectively generate your 200+ pages for you. In actual fact you'd have just 1 additional page that holds your image and pass a query string to that page which governs which image to show.

So, following birdbrain's example, your links become something like:


<a href="showpic.php?pic=image1.jpg" target="iframe_a"><img src="image1.jpg" alt=""></a>
<a href="showpic.php?pic=image1.jpg" target="iframe_a"><img src="image2.jpg" alt=""></a>
<a href="showpic.php?pic=image1.jpg" target="iframe_a"><img src="image3.jpg" alt=""></a>


Or, don't use an IFRAME.

Rain_Lover




msg:4106042
 4:04 pm on Mar 28, 2010 (gmt 0)

Dear penders,

Looks very promising! But I know absolutely nothing about PHP and really need help to realize how to set it up. I'd be grateful if you could help me.

birdbrain




msg:4106046
 4:41 pm on Mar 28, 2010 (gmt 0)

Hi there Rain_Lover,

as your host does not allow javascript are you certain that it has a php option?

birdbrain

penders




msg:4106059
 5:10 pm on Mar 28, 2010 (gmt 0)

as your host does not allow javascript are you certain that it has a php option?


Who says? JavaScript is client-side and not in any way dependent on the host. JavaScript would be a viable alternative to using an IFRAME, and possibly what many would choose to implement a simple slideshow.

birdbrain




msg:4106062
 5:35 pm on Mar 28, 2010 (gmt 0)

Hi there penders,

I asked that question about the php option because Rain_Lover has stated on
another forum that his/her host - "Google Sites" - does not permit JavaScript. ;)

birdbrain

Rain_Lover




msg:4106111
 8:37 pm on Mar 28, 2010 (gmt 0)

@ birdbrain,

Not sure, but I can give it a try.

penders




msg:4106121
 9:14 pm on Mar 28, 2010 (gmt 0)

>> Rain_Lover has stated on another forum that his/her host - "Google Sites" - does not permit JavaScript. ;)

Ah, I see! :)

(I very much doubt that "Google Sites" permits PHP either.)

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / HTML
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved