Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 17
  1. #1
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts

    Exclamation How to display text with image.

    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.

    Frank

    My existing page is here 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.
    Last edited by effpeetee; 01-06-2010 at 02:44 PM.
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #2
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Gentle bump, bump.

    Frank
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #3
    New Coder
    Join Date
    Oct 2009
    Posts
    23
    Thanks
    0
    Thanked 1 Time in 1 Post
    Hello,

    I would recommend using Photoshop to execute this task.

    Best regards,
    CoffeeCup.com

  • #4
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    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.
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #5
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Gentle bounce.

    Frank
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #6
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    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 that may helpl you. I hope anyway.
    As always, view the source to see how it's done.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #7
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    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 that I am developing.

    This is what I am trying to emulate using image replacement to stop the need to keep reloading a fresh html every time.

    Frank.
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #8
    Regular Coder
    Join Date
    Jun 2002
    Posts
    676
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by effpeetee View Post
    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®

  • #9
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Quote Originally Posted by justame View Post
    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 what I am trying to get.

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

    Frank
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #10
    Regular Coder
    Join Date
    Jun 2002
    Posts
    676
    Thanks
    1
    Thanked 0 Times in 0 Posts
    ahhh...

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

  • #11
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,707
    Thanks
    0
    Thanked 237 Times in 232 Posts
    Hi there Frank,

    is it possible that this could be the answer.
    Code:
    
    <!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

  • Users who have thanked coothead for this post:

    effpeetee (01-08-2010)

  • #12
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,707
    Thanks
    0
    Thanked 237 Times in 232 Posts
    Hi there Frank,

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

    coothead

  • #13
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    That's lovely. I just need to trim it a little and the job is done. I added a preloader and put it here.

    Many thanks to all of you that have assisted me.

    Frank
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #14
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,707
    Thanks
    0
    Thanked 237 Times in 232 Posts
    Hi there Frank,

    rather than have those two links above the image, you could try it like this instead...
    Code:
    
    <!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

  • #15
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    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.

    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
    Last edited by effpeetee; 01-08-2010 at 07:03 PM.
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •