Results 1 to 5 of 5

Thread: Title="captions"

  1. #1
    Join Date
    Oct 2006
    Location
    New York, NY, USA
    Posts
    260
    Thanks
    42
    Thanked 24 Times in 24 Posts

    Default Title="captions"

    Hope to add captions for big images at http://jacquimorgan.tripod.com/hist/index.html#top)

    Looking at http://www.dynamicdrive.com/dynamici...thumbnail2.htm, the option to ”Specify whether TITLE attribute of thumbnail links should show as description under enlarged image” was appealing
    var description=(thumbnailviewer2.enableTitle && linkobj.getAttribute("title"))? linkobj.getAttribute("title") : "" //Get title attr
    But the <script> seemed overly complicated.

    Would prefer a simpler approach -- for instance http://www.morgangaynin.com
    <script language="JavaScript" type="text/javascript"> <!—
    if (document.images) {
    pic1 = new Image pic1.src = "images/pic_01.jpg" …
    pic6 = new Image pic6.src = "images/pic_06.jpg"
    holder = new Image holder.src = "images/holder.jpg"
    }
    else { document.pic1 = "" … document.pic6 = ""
    document.holder = ""
    }
    </script>
    Thumbnails in <BODY>
    <img src="images/pic_01a.jpg" onMouseOver="document.holder.src=pic1.src">
    <img src="images/pic_06a.jpg" onMouseOver="document.holder.src=pic6.src">

    I’m trying to figure out how to add TITLES by adapting something like
    <script type="text/javascript" >
    /*http://www.alistapart.com/articles/imagegallery JavaScript Image Gallery by Jeremy Keith changes images and title */
    function showPic (whichpic) {
    if (document.getElementById) {
    document.getElementById('MGholder').src = whichpic.href;
    if (whichpic.title) {
    document.getElementById('desc').childNodes[0].nodeValue = whichpic.title;
    } else {
    document.getElementById('desc').childNodes[0].nodeValue = whichpic.childNodes[0].nodeValue;
    }
    return false;
    } else {
    return true;
    }
    }
    </script>
    <BODY> link: <a onclick="return showPic(this)" href="Scott.jpg" title="Scott calendar"> Scott calendar </a> [Maybe add this under thumbnails?]

    So I attempted (without success) variations of
    MG1 =new Image(); MG1 = "<img src='03_Scott.jpg' title-'Scott' />";
    MG2 = new Image(); MG2.src = '04_ManGoat.jpg';
    <div id="space">
    <img src="04_AmericanArtist.jpg" alt="MGholder" name="MGholder" hspace=0 vspace=0 border=1 class="MGholder" />
    <p class="desc">Caption</p> </div> <!--closeSPACE-->

    The other onclick ”loadpage” script on the THUMBNAILS is for a pop-window
    <div id="thumbnails">
    <a href="#nogo" onclick="javascript:loadpage('03_Scott.jpg');
    return showPic(this);"
    onMouseOver="MGOn('MG1')" title="Scott">
    <img name="1" alt="Scott" src="03_Scott.jpg" title="Scott" /></a>
    <a href="#" onclick="javascript:loadpage('04_ManGoat.jpg')"
    onMouseOver="MGOn('MG2')" title="ManGoat">
    <img name="2" alt="ManGoat" src="04_ManGoat.jpg" title="ManGoat" /></a></div>

    Perhaps my whole approach is “muddled.”
    Last edited by auntnini; 07-25-2008 at 10:46 PM.

  2. #2
    Join Date
    Oct 2006
    Location
    New York, NY, USA
    Posts
    260
    Thanks
    42
    Thanked 24 Times in 24 Posts

  3. #3
    Join Date
    Oct 2006
    Location
    New York, NY, USA
    Posts
    260
    Thanks
    42
    Thanked 24 Times in 24 Posts

    Default Still trying

    Remembering we had to determine: if (! document.images) return; -- it is amazing that <script> below can load images in pop-window:

    // JavaScript Document
    var mypop=null;
    function loadpage(url) {
    if ((!mypop) || (mypop.close)) {
    mypop = window.open (url, 'mypop', 'width=400px, height=375px, toolbar=0, resizable=1, screenx=0, left=20, screeny=0, top=20');
    } else { mypop.document.location.href=url; }
    mypop.focus(); return true;
    }

    But (greedy me), can we also detect / display TITLE="caption" included in a link?
    /*in BODY <a href="#nogo" onclick="loadpage('image.jpg')" title="description"> thumbnail / text </a>*/

    From http://www.dynamicdrive.com/dynamicindex4/thumbnail.htm
    //Use link title attr as description
    if (this.enableTitle && link.getAttribute("title"))
    imageHTML+='<br />'+link.getAttribute("title")

  4. #4
    Join Date
    Oct 2006
    Location
    New York, NY, USA
    Posts
    260
    Thanks
    42
    Thanked 24 Times in 24 Posts

    Default

    Last edited by auntnini; 08-18-2008 at 07:34 PM.

  5. #5
    Join Date
    Oct 2006
    Location
    New York, NY, USA
    Posts
    260
    Thanks
    42
    Thanked 24 Times in 24 Posts

    Default title=CAPTION at last!

    After struggling with this, gave up onclick ”loadpage” script on the THUMBNAILS for a pop-window, and exchanged the “imgOn” onmouseover for http://www.alistapart.com/articles/imagegallery JavaScript Image Gallery by Jeremy Keith to change images and titles:
    Code:
    <a href="03_CalendarScottPrinting.jpg" onmouseover="return showPic(this)" title="Scott Printing Calendar">   
    <img name="1" alt="Scott" src="03_CalendarScottPrinting.jpg" /></a>
    
    <a href="04_ManGoat.jpg"  onmouseover="return showPic(this)"
    title="American Artist cover art"> 
    <img name="2" alt="American Artist" src="04_ManGoat.jpg" /></a>
    Adding the onclick “loadpage” still loaded image in pop-window, but – since the href=”imageName” – it also changed document window to display image so dropped the "loadpage" script. Had problem, too, with linking logo image to home page as substitute for CSS Home button.

    Results can be viewed at http://jacquimorgan.tripod.com/hist/index.html.

    ====================================
    Even better is .innerHTML (which allows for original script to preload images and pop-window) at http://jacquimorgan.tripod.com/child/index.html#top:

    Code:
    <a href="#nogo" onclick="javascript:loadpage('LightsAlongPath.jpg')" 
    onMouseOver="MGOn('MG1'); document.getElementById('text').innerHTML ='cover'"> <img name="1" class="thumb" alt="Lights along Path" title="Lights along the Path" src="LightsAlongPath.jpg" /></a>
    <a href="#"  onclick="javascript:loadpage('c_06.jpg')" 
    onMouseOver="MGOn('MG2'); document.getElementById('text').innerHTML ='from Lights along Path'"> <img name="2" class="thumb" alt="from Lights along Path" title="from Lights along Path" src="c_06.jpg"/></a>
    Got .innerHTML info at http://javascript.about.com/library/bldom06.htm and http://www.tizag.com/javascriptT/jav...-innerHTML.php . Shame on me making it more complicated.

    Now must get captions in pop-window.
    Last edited by auntnini; 09-20-2008 at 11:30 PM.

Bookmarks

Posting Permissions

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