SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Aug 2008
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    vicsjavascript continuous scroller adding html links?

    w.vicsjavascripts.org.uk/ContinuousScroll

    Hello there, im learning to do html and web pages and what not in dreamweaver. I would like to use the above scroller so when you click a scrolling image a webpage opens up. I've been playing around with the script to a good degree but so far havent figured out to do it. Any help would be really appreciated. Thank you for any help.


    var ImgPath='(vics webpage would go here)';
    var ContentAry=[ImgPath]
    ContentAry[2]=['IMG','One.gif','',100 ,80 ,];
    // type, content, link, width, height, bgcol, txtcol, txtalign, fontsize
    // 0 1 2 3 4 5 6 7 8

    ContentAry[3]=['TXT','Some Text','' ,'' ,'' ,'#FFCC66','#9966FF','center' ,'13px'];
    ContentAry[4]=['IMG','Three.gif',''];
    ContentAry[5]=['IMG','Four.gif',''];
    ContentAry[6]=['IMG','Five.gif',''];
    ContentAry[7]=['IMG','Six.gif',''];
    ContentAry[8]=['IMG','Seven.gif',''];
    ContentAry[9]=['IMG','Eight.gif',''];
    ContentAry[10]=['IMG','Nine.gif','',100 ,80 ,];

    var ImgPath2='../StdImages/';
    var ContentAry2=[ImgPath]
    ContentAry2[1]=['TXT','<div style="border: 0px;height:0px;" ><br><span style="font-size:18px;font-weight:bold;" ></span><br><br></div>','' ,'298' ,'' ,'#FFCC66','#FFFFFF','center' ,'11px'];
    Last edited by takevin1; Aug 6, 2008 at 09:56. Reason: add

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    It creates the image with the following line

    Code javascript:
    zxcobj.src=zxcpth+zxcary[zxccnt][1];

    You might be able to create a linked image from there.

    Code javascript:
    zxcobj = imageLink(zxcpth+zxcary[zxccnt][1], 'somewhere.html');

    and have elsewhere, a function that returns the linked image.

    Code javascript:
    function imageLink(src, href) {
        var img = document.createElement('img');
        var a = document.createElement('a');
        img.src = src;
        a.href = href;
        a.appendChild(img);
        return a;
    }

    edit: spelling correction on function name
    Last edited by paul_wilkins; Aug 7, 2008 at 14:27.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Member
    Join Date
    Aug 2008
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    no luck, it just blanks out the whole scroller then.

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    I've just been experimenting with it and have come up with a way that is compatible with how the rest of the script works.

    Along with the zxcStyle function create one called zxcAttr

    Code javascript:
    function zxcAttr(zxcele,zxcattr) {
        if (typeof(zxcele)=='string') {
            zxcele=document.createElement(zxcele);
        }
        for (key in zxcattr) {
            zxcele[key]=zxcattr[key];
        }
        return zxcele;
    }

    Then use the following to create the image link

    Code javascript:
    if (zxcary[zxccnt][0].toUpperCase().match('I')){
        zxcobj = zxcAttr('A', {'href': 'somewhere.html'});
        zxcobj.appendChild(zxcAttr('IMG', {'src': zxcpth+zxcary[zxccnt][1]}));
    }

    After that it's just a matter of adjusting the css so that the linked images fit within their containers
    Last edited by paul_wilkins; Aug 7, 2008 at 17:34.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


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
  •