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.
Results 1 to 6 of 6
  1. #1
    Regular Coder
    Join Date
    Nov 2002
    Posts
    122
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Unhappy New to js and have a problem with ahref

    I have assigned a url to a variable in a function.

    I test that the variable does contain something by using
    Code:
    <div id="caption"></div>
    and it does indeed display a URL.

    What I now need to do is load an image, which i can already do using

    Code:
    <img name="photo">
    this displays the image

    but i am unable to set the a href so that if the user clicks on the image and takes it to a highres URL saved in the Variable...i am trying to use this.

    Code:
    <a href="javascript:location.href='+caption+;'"><img name="photo"></a>

  • #2
    Senior Coder nikkiH's Avatar
    Join Date
    Jun 2005
    Location
    Near Chicago, IL, USA
    Posts
    1,973
    Thanks
    1
    Thanked 32 Times in 31 Posts
    You can't do it that way. Try this instead.

    Code:
    <a href="#" onClick="location.href='+caption+'"><img name="photo"></a>

    If this post contains any code, I may or may not have tested it. It's probably just example code, so no getting knickers in a bunch over a typo, OK? If it doesn't have basic error checking in it, such as object detection or checking if objects are null before using them, put that in there. I'm giving examples, not typing up your whole app for you. You run code at your own risk.
    Bored? Visit
    http://www.kaelisspace.com/

  • #3
    Regular Coder
    Join Date
    Nov 2002
    Posts
    122
    Thanks
    1
    Thanked 0 Times in 0 Posts
    For some reason all that appears on the Status bar when i hover over my image is # ??

  • #4
    Regular Coder martin_narg's Avatar
    Join Date
    Jul 2002
    Location
    Chamonix, France
    Posts
    600
    Thanks
    1
    Thanked 3 Times in 3 Posts
    clickety click the image =)
    "Cos it's strange isn't it. You stand in the middle of a library and go 'Aaaaaaaaaaaaaaaaggggggghhhhhhh!'
    and everybody just stares at you. But you do the same in an aeroplane, and everybody joins in."
    -Tommy Cooper

  • #5
    Senior Coder nikkiH's Avatar
    Join Date
    Jun 2005
    Location
    Near Chicago, IL, USA
    Posts
    1,973
    Thanks
    1
    Thanked 32 Times in 31 Posts
    You can't change the href like that, so the status bar shows the href, which is #.
    If you want the status bar to change, you can add code that will work for everyone who doesn't have it disabled. (firefox users can disable changing the status bar text)

    Code:
    <a href="#" 
    onClick="location.href='+caption+'"
    onMouseOver="window.status='"+caption+"'
    onMouseOut="window.status=''"><img name="photo"></a>

    If this post contains any code, I may or may not have tested it. It's probably just example code, so no getting knickers in a bunch over a typo, OK? If it doesn't have basic error checking in it, such as object detection or checking if objects are null before using them, put that in there. I'm giving examples, not typing up your whole app for you. You run code at your own risk.
    Bored? Visit
    http://www.kaelisspace.com/

  • #6
    Regular Coder
    Join Date
    Nov 2002
    Posts
    122
    Thanks
    1
    Thanked 0 Times in 0 Posts
    What's happening is i'm not sure how to manage 'Caption' which holds my filename.
    Ideally, i just need to display the image thumbnail (which works) but also have it ahref to it's HIRes version (not working).

    Eventually, what i'd also like to do is replace the buttons with text or an image, is that even possible?

    here's my entire page
    Code:
    <%
    
    <%
    
    pic1="http://www.armyimages.forces.gc.ca/scripts/PortWeb.dll?thumbnail=198&catalog=cls_images"
    pic1FileName="IS2002-6619a.jpg"
    pic2="http://www.armyimages.forces.gc.ca/scripts/PortWeb.dll?thumbnail=237&catalog=cls_images"
    pic2FileName="IS2003-2432a.jpg"
    pic3="http://www.armyimages.forces.gc.ca/scripts/PortWeb.dll?thumbnail=87&catalog=cls_images"
    pic3FileName="APD02205257e.jpg"
    
    %>
    
    <table cellspacing="0" cellpadding="0" border="0">
      <tr>
        <td align="center"><strong>
    	<a href="Javascript: Photo"><img name="photo"></a>
    	</strong>
    	
    	
    	<br>
    	<div id="caption"></div>
    	</td>
      </tr><form name="myform">
      <tr>
        <td align="center">
        <input type="button" value="<- Back" onclick="displayphoto; clickphoto(-1);" id="previousbutton" disabled=true>
        &nbsp;
        &nbsp;<input type="button" value="Next ->" onclick="displayphoto; clickphoto(1);" id="nextbutton" >
        </td>
      </tr></form>
    </table>
    </center>
    
    <script language="javascript">
    
    function clickphoto(direction)
    {
    
    if (direction == -1 && pi == 0) {return;}
    if (direction == 1 && pi==photo.length-1) {return;}
    
    pi += direction;
    pi %= photo.length;
    if (pi ==-1) pi = photo.length - 1;
    
    if (pi==0) {document.myform.previousbutton.disabled=true;}
    else {document.myform.previousbutton.disabled=false;}
    
    if (pi==photo.length-1) {document.myform.nextbutton.disabled=true;}
    else {document.myform.nextbutton.disabled=false;}
    
    displayphoto(pi);
    
    }
    
    function swapimage()
    {
    pi++;
    pi %= photo.length;
    displayphoto(pi);
    }
    
    function displayphoto(photonum)
    {
    
    
    document.images['photo'].src=photo[photonum].name;
    //caption.innerHTML=(photonum + 1) + ' of ' + photo.length + '<br>&nbsp;';
    caption.innerHTML='&nbsp;';
    if (photo[photonum].caption.length > 0)
      {
      caption.innerHTML+='<b>' + photo[photonum].caption + '</b>';
      }
    caption.innerHTML+='&nbsp;';
    }
    
    function Photo(name, caption)
    {
    this.name=name;
    this.caption=caption;
    return this;
    }
    
    var photo=new Array(), pi=0;
    
    photo[pi++]=new Photo('<%=pic1%>','<%=pic1FileName%>');
    photo[pi++]=new Photo('<%=pic2%>','<%=pic2FileName%>');
    photo[pi++]=new Photo('<%=pic3%>','<%=pic3FileName%>');
    
    
    pi=0;
    
    var caption=document.getElementById('caption');
    displayphoto(pi);
    
    var images=new Array();
    
    for (var ii=0;ii<photo.length;ii++)
      {
      images[ii]=new Image();
      images[ii].src=photo[ii].name;
      }
    
    //var slideshow=setInterval('swapimage()', 10000);
    
    
    </script>
    Last edited by tcadieux; 08-16-2005 at 07:58 PM.


  •  

    Posting Permissions

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