...

View Full Version : How to display text with image.



effpeetee
01-06-2010, 10:54 AM
I am redesigning my site to get rid of the html pages that display my images. I have so far got the basic page to work but I cannot see how to include the caption images with the picture changes.

Any help would be welcome.

The page is here. (http://www.exitfegs.co.uk/newindex.html)

Frank

My existing page is here (http://www.exitfegs.co.uk) so that you can see what I want with the captions.

This new index page was originally written by one <meta name="Author" content="Patrick Garies" >and modified by me.

effpeetee
01-06-2010, 09:39 PM
Gentle bump, bump.

Frank

CoffeeCup.com
01-07-2010, 02:52 AM
Hello,

I would recommend using Photoshop to execute this task.

Best regards,
CoffeeCup.com :thumbsup:

effpeetee
01-07-2010, 08:28 AM
Thanks. I had considered that approach, but I would rather use a software approach. Partly because I want toi know how to do it and also because it seems more elegant to me.

Frank.

effpeetee
01-07-2010, 09:41 PM
Gentle bounce.

Frank

Excavator
01-07-2010, 10:00 PM
Hello Frank,
I always like to wrap the image and the caption together in a div. Then you can position the smaller of the two under, over or beside the larger and they will stay together because they are contained together.

Have a look at a demo I have (http://nopeople.com/CSS/image%20captions/index.html)that may helpl you. I hope anyway.
As always, view the source to see how it's done.

effpeetee
01-07-2010, 10:37 PM
Hello Excavator.

The trouble is that I want to use my png captions and I cannot find a way to do it.

This is the program (http://www.exitfegs.co.uk/anewindex.html) that I am developing.

This is what I am trying to emulate (http://www.exitfegs.co.uk/) using image replacement to stop the need to keep reloading a fresh html every time.

Frank.

justame
01-08-2010, 04:30 AM
using image replacement to stop the need to keep reloading a fresh html every time.

just a whispers® to frank...

do you mean something like this???

http://www.ritaspaintingco.ca/photogallery.html

you could remove the 'small thumbnails' n' just a replace® them with your 'text' n' when clicked thattt respective image just a loads® without the ol' page fresh...:O)

just a goodluck®

effpeetee
01-08-2010, 09:19 AM
just a whispers® to frank...

do you mean something like this???

http://www.ritaspaintingco.ca/photogallery.html

you could remove the 'small thumbnails' n' just a replace® them with your 'text' n' when clicked thattt respective image just a loads® without the ol' page fresh...:O)

just a goodluck®
Thanks, But it is not quite what I want.

This is (http://exitfegs.co.uk/Barker.html)what I am trying to get.

To load the caption with the picture. The caption is another image - a png.

Frank

justame
01-08-2010, 02:58 PM
ahhh...

ummm...then why dont you just a put® the 'caption' right on the image? why load two images??? *whispers...just a curious® :O)))

coothead
01-08-2010, 03:31 PM
Hi there Frank,

is it possible that this could be the answer. ;)


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

<base href="http://exitfegs.co.uk/">

<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">
<meta http-equiv="Content-Script-Type" content="text/javascript">

<title></title>

<style type="text/css">
img {
display:block;
margin:auto;
}
#nav {
float:left;
width:220px;
margin:0 60px 0 0;
padding:10px;
list-style-type:none;
background-color:#ddd;
}
#nav li {
float:left;
width:100%;
height:20px;
line-height:20px;
font-size:10px;
color:#000;
text-decoration:underline;
cursor:pointer;
}
#image-holder {
float:left;
max-width:800px;
}
</style>

<!--[if IE 6]>
<style type="text/css">
#image-holder {
width:800px;
}
</style>
<![endif]-->

<script type="text/javascript">

function init(){

var imge=null;

pics=['23moss.jpg','web3.jpg','tedanddimitri.jpeg','img152.png','Web6.png','Web8.jpg',
'Ritcroftgroup.jpg','Eddie.jpg','Bluebell1.jpg','steveviewing.jpg','Barker1.jpg',
'xmas06.jpg','xmas06b.jpg','114.jpg','web19.jpg','96.jpg','frwall1.jpg'];

disc=['','hstwo.png','hsthree.png','hsfour.png','hsfive.png','hssix.png','hstwelve.png',
'hseddie.png','hsbluebell.png','stevetv.png','f1.png','xmastext.png','xmastext.png',
'hswhere.png','heath1.png','cjstorm.png','lounge.png'];

lis=document.getElementById('nav').getElementsByTagName('li');

for(c=0;c<lis.length;c++) {
lis[c].number=c;
lis[c].onclick=function() {
if(imge) {
document.getElementById('image-holder').removeChild(imge);
imge=null;
}
document.getElementById('mypic').src=pics[this.number];
if(disc[this.number]!='') {
imge=document.createElement('img');
imge.setAttribute('src',disc[this.number]);

document.getElementById('image-holder').appendChild(imge);
}
}
}
}

if(window.addEventListener){
window.addEventListener('load',init,false);
}
else {
if(window.attachEvent){
window.attachEvent('onload',init);
}
}
</script>

</head>
<body>

<div>

<h1 id="header">
<img src="afternoon.png" alt="">
<img src="websitehome.png" alt="">
</h1>

<ul id="nav">
<li>Home</li>
<li>Betty and Frank.</li>
<li>Little Ted and Dmitri.</li>
<li>Lovely Betty and Pussycat.</li>
<li>Betty and the Bears.</li>
<li>Steven and Joyce and Mark.</li>
<li>Ritcroft family group.</li>
<li>Eddie, relaxing at home.</li>
<li>Steven on the Bluebell Railway.</li>
<li>Steve at the box.</li>
<li>Yvonne,Susan and Claire.</li>
<li>Christmas 2006 at Yvonne's - 1.</li>
<li>Christmas 2006 at Yvonne's - 2.</li>
<li>A life span.</li>
<li>In the middle of the above.</li>
<li>A stormy view of Clapham Junction.</li>
<li>The Lounge.</li>
</ul>

<div id="image-holder">
<img id="mypic" src="23moss.jpg" alt="">
</div>

</body>
</html>

coothead

coothead
01-08-2010, 03:40 PM
Hi there Frank,

my effort would probably be 'smoooooother' with an image preloader. ;)

coothead

effpeetee
01-08-2010, 05:09 PM
That's lovely. I just need to trim it a little and the job is done. I added a preloader and put it here. (http://exitfegs.co.uk/coothead.html)

Many thanks to all of you that have assisted me.

Frank

coothead
01-08-2010, 06:12 PM
Hi there Frank,

rather than have those two links above the image, you could try it like this instead...


<!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">
<meta http-equiv="Content-Script-Type" content="text/javascript">

<title></title>

<style type="text/css">
img {
display:block;
margin:auto;
}
#nav {
float:left;
width:220px;
margin:0 60px 0 0;
padding:10px;
list-style-type:none;
background-color:#ddd;
}
#nav li {
float:left;
width:100%;
height:20px;
line-height:20px;
font-size:10px;
color:#000;
text-decoration:underline;
cursor:pointer;
}
#nav #big-margin {
margin-bottom:30px;
}
#nav a {
color:#000;
}
#image-holder {
float:left;
max-width:800px;
}
</style>

<!--[if IE 6]>
<style type="text/css">
#image-holder {
width:800px;
}
</style>
<![endif]-->

<script type="text/javascript">

function init(){

var imge=null;

pics=['23moss.jpg','web3.jpg','tedanddimitri.jpeg','img152.png','Web6.png','Web8.jpg',
'Ritcroftgroup.jpg','Eddie.jpg','Bluebell1.jpg','steveviewing.jpg','Barker1.jpg',
'xmas06.jpg','xmas06b.jpg','114.jpg','web19.jpg','96.jpg','frwall1.jpg'];

disc=['','hstwo.png','hsthree.png','hsfour.png','hsfive.png','hssix.png','hstwelve.png',
'hseddie.png','hsbluebell.png','stevetv.png','f1.png','xmastext.png','xmastext.png',
'hswhere.png','heath1.png','cjstorm.png','lounge.png'];

lis=document.getElementById('nav').getElementsByTagName('li');

for(c=0;c<lis.length;c++) {
lis[c].number=c;
lis[c].onclick=function() {
if(imge) {
document.getElementById('image-holder').removeChild(imge);
imge=null;
}
document.getElementById('mypic').src=pics[this.number];
if(disc[this.number]!='') {
imge=document.createElement('img');
imge.setAttribute('src',disc[this.number]);

document.getElementById('image-holder').appendChild(imge);
}
}
}
}

if(window.addEventListener){
window.addEventListener('load',init,false);
}
else {
if(window.attachEvent){
window.attachEvent('onload',init);
}
}
</script>

</head>
<body>

<h1 id="header">
<img src="afternoon.png" alt="">
<img src="websitehome.png" alt="">
</h1>

<ul id="nav">
<li>Home</li>
<li>Betty and Frank.</li>
<li>Little Ted and Dmitri.</li>
<li>Lovely Betty and Pussycat.</li>
<li>Betty and the Bears.</li>
<li>Steven and Joyce and Mark.</li>
<li>Ritcroft family group.</li>
<li>Eddie, relaxing at home.</li>
<li>Steven on the Bluebell Railway.</li>
<li>Steve at the box.</li>
<li>Yvonne,Susan and Claire.</li>
<li>Christmas 2006 at Yvonne's - 1.</li>
<li>Christmas 2006 at Yvonne's - 2.</li>
<li>A life span.</li>
<li>In the middle of the above.</li>
<li>A stormy view of Clapham Junction.</li>
<li id="big-margin">The Lounge.</li>
<li><a href="ninea.html">Family photos.</a></li>
<li><a href="hol1a.html">Holiday snaps.</a></li>
</ul>

<div id="image-holder">
<img id="mypic" src="23moss.jpg" alt="">
</div>

</body>
</html>

coothead

effpeetee
01-08-2010, 07:59 PM
Many thanks coothead, but I cannot get the code to work. I am probably mis-understanding something. Any thoughts?

This is as far as I have got so far. (http://exitfegs.co.uk/index.html)

Still need to get the captions on board. I'm not quite sure what to do with your previous code to get the captions on here.
My Javascript is dire.

Frank

coothead
01-08-2010, 08:19 PM
Hi there Frank,

what is wrong with the code that I gave you in my previous post?

Why have you decided to modify it in that manner?

coothead

effpeetee
01-08-2010, 09:10 PM
coothead.

I am having some silly problems.

I call cootheadtest.html select the family option and then click the Home icon which then returns me to index.html although it is linked back to cootheadtest.html.

The same thing is hapenning if I select the holiday icon. Very weird.

Getting me really mixed up.

I think I must be having trouble with my Cache. I'll power down and srat again.

EDIT: Yes, it was that.

It's here now. (http://exitfegs.co.uk/cootheadtest.html)

Still needs tydying up a bit. Butotherwise OK

Frank



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum