55 users online (1 members and 54 guests)  


  Results 1 to 12 of 12

Related

  1. one image three links    Forum: HTML Forum
    Replies: 9
  2. Replies: 1
  3. Hidden links on an image    Forum: Javascript Forum
    Replies: 2
  4. image swap with links???    Forum: Javascript Forum
    Replies: 4
  5. border on image links    Forum: HTML Forum
    Replies: 11
  1. #1
    Bigmous's Avatar
    Junior Member

    Status
    Offline
    Join Date
    Dec 2008
    Location
    Sydney, Australia
    Posts
    27

    swapped image links for portfolio

    I've currently got upto 4-5 images 100px x 100px, that once hovered over a larger image appears next to it.

    is there a way to give each large image a seperate link once the smaller version is hovered over?

    thanks in advance,

    mous

  2. #2
    jthayne's Avatar

    Status
    Offline
    Join Date
    Aug 2008
    Location
    Texas
    Posts
    508

    Re: swapped image links for portfolio

    Yes, it can be done. If you could post your current code, we could point you in the simplest direction.

  3. #3
    Bigmous's Avatar
    Junior Member

    Status
    Offline
    Join Date
    Dec 2008
    Location
    Sydney, Australia
    Posts
    27

    Re: swapped image links for portfolio

    <table>

    <tr>

    <td class="imgsmall">

    <!-- small -->
    <div id="lsmall">

    <img src="images/small/qc.jpg" width="100" height="100" name="small" border="0" onMouseOver="IMA_swapImage('blank','','images/large/qc.jpg',1)">

    <img src="images/small/ffs.jpg" width="100" height="100" name="small" border="0" onMouseOver="IMA_swapImage('blank','','images/large/ffs.jpg',1)">

    <img src="images/small/jca.jpg" width="100" height="100" name="small" border="0" onMouseOver="IMA_swapImage('blank','','images/large/jca.jpg',1)">

    <img src="images/small/onl.jpg" width="100" height="100" name="small" border="0" onMouseOver="IMA_swapImage('blank','','images/large/onl.jpg',1)">

    <!-- end small -->
    </div>

    </td>

    <td class="imglarge">

    <img src="images/blank.gif" width="300" height="300" name="blank">

    </td>

    </tr>

    </table>

  4. #4
    rangana's Avatar
    Moderator/Allstar

    Status
    Offline
    Join Date
    Feb 2008
    Location
    Cebu City Philippines
    Posts
    317

    Re: swapped image links for portfolio

    Please show us the IMA_swapImage code.
    Checkout my porfolio.
    Please click the button when a member helped you.
    Take time to use Forum's Search function.

  5. #5
    coothead's Avatar
    bald headed old fart

    Status
    Offline
    Join Date
    Aug 2003
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    732

    Re: swapped image links for portfolio

    Hi there Bigmous,

    try it like this...
    Code:
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    
    <title></title>
    
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <meta http-equiv="Content-Style-Type" content="text/css">
    <meta http-equiv="Content-Script-Type" content="text/javascript">
    
    <style type="text/css">
    #imgsmall img {
        width:100px;
        height:100px;
     }
    #large {
        width:300px;
        height:300px;
        border:0;
     }  
    </style>
    
    <script type="text/javascript">
    
    if(window.addEventListener){
       window.addEventListener('load',swapImage,false);
     }
    else { 
    if(window.attachEvent){
       window.attachEvent('onload',swapImage);
      }
     }
    
    function swapImage(){
       obj=document.getElementById('large');
       urls=['page1.html','page2.html','page3.html','page4.html'];
       thmbs=document.getElementById('imgsmall').getElementsByTagName('img');
    
    for(c=0;c<thmbs.length;c++) {
       thmbs[c].id='th'+c;
       thmbs[c].onmouseover=function() {
       obj.src=this.src.replace('small','large');
       obj.parentNode.href=urls[this.id.split('th')[1]];
       }
      }
     }
    </script>
    
    </head>
    <body>
    
    <div id="imgsmall">
     <img src="images/small/qc.jpg" alt="qc">
     <img src="images/small/ffs.jpg" alt="ffs">
     <img src="images/small/jca.jpg" alt="jca">
     <img src="images/small/onl.jpg" alt="onl">
    </div>
    
    <div>
     <a href="#">
      <img id="large" src="images/blank.gif" alt="">
     </a>
    </div>
    
    </body>
    </html>
    

  6. #6
    Bigmous's Avatar
    Junior Member

    Status
    Offline
    Join Date
    Dec 2008
    Location
    Sydney, Australia
    Posts
    27

    Re: swapped image links for portfolio

    Here's my javascript code
    Code:
    	 <!-- Hide this code from non JavaScript browsers
    
    function IMA_preloadImages() { //v3.0
      var d=document; if(d.images){ if(!d.IMA_p) d.IMA_p=new Array();
        var i,j=d.IMA_p.length,a=IMA_preloadImages.arguments; for(i=0; i<a.length; i++)
        if (a[i].indexOf("#")!=0){ d.IMA_p[j]=new Image; d.IMA_p[j++].src=a[i];}}
    }
    
    function IMA_swapImgRestore() { //v3.0
      var i,x,a=document.IMA_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
    }
    
    function IMA_swapImage() { //v3.0
      var i,j=0,x,a=IMA_swapImage.arguments; document.IMA_sr=new Array; for(i=0;i<(a.length-2);i+=3)
       if ((x=IMA_findObj(a[i]))!=null){document.IMA_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
    }
    
    function IMA_findObj(n, d) { //v4.01
      var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
        d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
      if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
      for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=IMA_findObj(n,d.layers[i].document);
      if(!x && d.getElementById) x=d.getElementById(n); return x;
    }
    
                        // End of JavaScript code -->

    heres my html code
    HTML Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd"><html lang="en">
    
    <head>
    	
    <title>Welcome to ....</title>
    
    <meta name="author" content="" />
    <meta name="keywords" content=""/>
    <meta name="description" content=""/>
    <meta http-equiv="content-type" content="text/html;charset=utf-8">
    
    <script type="text/javascript" src="js/preload.js">
    
    </script>
    
    <style type="text/css" media="screen">@import "a1c.css"; 
    
    </style>
    
    </head>
    
    <body onload="IMA_preloadImages('images/large/qc.jpg','images/large/ffs.jpg','images/large/jca.jpg','images/large/onl.jpg')">
    
    <!-- extra container -->
    <div id="extra-container">
    
    <!-- main container -->
    <div id="main-container">
    
    <!-- header -->
    <div id="header">
    
    <img src="images/logo.jpg" width="762" height="150" alt="" title="" class="logo">
    
    <!-- end header -->
    </div>
    
    <!-- top-nav -->
    <div id="top-nav">
    
    <ul>
    	<li id="current"><a href="#">Websites</a>&nbsp;-&nbsp;</li>
    	<li><a href="logos_graphics.html">Logos/Graphics</a>&nbsp;-&nbsp;</li>
    	<li><a href="domain_names.html">Domain Names</a>&nbsp;-&nbsp;</li>
    	<li><a href="hosting_services.html">Hosting Services</a></li>
    </ul>
    
    <!-- end top-nav -->
    </div>
    
    <!-- left-nav -->
    <div id="left-nav">
    
    <ul>
    
    <li><a href="index.html">Home</a></li>
    
    <li><a href="about_us.html">About Us</a></li>
      
    <li class="sf-vertical"><a href="our_services.html">Our Services</a>
    
    <ul>
    
    <li id="current"><a href="#">Websites</a></li>
    
    <li><a href="logos_graphics.html">Logos/Graphics</a></li>
    
    <li><a href="domain_names.html">Domain Names</a></li>
    
    <li><a href="hosting_services.html">Hosting Services</a></li>
    
    </ul>  
    	</li>
    
    <li><a href="testimonials.html">Testimonials</a></li>
    
    <li><a href="contact_us.html">Contact Us</a></li>
    
    </ul>
    
    <!-- end left-nav -->
    </div>
    
    <!-- main-content -->
    <div id="main-content">
    
    <!-- content -->
    <div id="content">
    
    <h1 class="toph1">Websites</h1>
    
    <!-- context -->
    <div id="context" class="clearfix">
    
    <table>
    
    <tr>
    
    <td class="imglarge">
    [COLOR="Red"] as u can see i start off with a large blank.gif and a set of smaller images underneath. however, i don't want a simple rollover, i know how to do that. What i really want is when the blank.gif is replaced when hovering over the small set of images, i need to somehow set a seperate link for each larger version of the smaller image.[/COLOR]
    
    <img src="images/blank.gif" width="300" height="300" name="blank">
    
    </td>
    
    </tr>
    
    <tr>
    
    <td class="imgsmall">
    
    <!-- small -->
    <div id="lsmall">
     
              <img src="images/small/qc.jpg" width="100" height="100" name="small" border="0" onMouseOver="IMA_swapImage('blank','','images/large/qc.jpg',1)"> 
         
              <img src="images/small/ffs.jpg" width="100" height="100" name="small" border="0" onMouseOver="IMA_swapImage('blank','','images/large/ffs.jpg',1)"> 
    
              <img src="images/small/jca.jpg" width="100" height="100" name="small" border="0" onMouseOver="IMA_swapImage('blank','','images/large/jca.jpg',1)"> 
         
              <img src="images/small/onl.jpg" width="100" height="100" name="small" border="0" onMouseOver="IMA_swapImage('blank','','images/large/onl.jpg',1)"> 
    
    <!-- end small -->
    </div>
    
    
    </td>
    
    </tr>
    
    </table>
    
    <!-- end context -->
    </div>
    
    <!-- end content -->
    </div>
    
    <!-- bottom-nav -->
    <div id="bottom-nav">
    
    <ul>	
    	<li><a href="terms_and_conditions.html">Terms &amp; Conditions</a>&nbsp;-&nbsp;</li>
    	<li><a href="privacy.html">Privacy</a>&nbsp;-&nbsp;</li>
    	<li><a href="legals.html">Legals</a>&nbsp;-&nbsp;</li>
    	<li><a href="contact_us.html">Contact Us</a></li>
    </ul>
    
    <!-- end bottom-nav -->
    </div>
    
    <!-- end main-content -->
    </div>
    
    <!-- end main-container -->
    </div>
    
    <!-- footer -->
    <div id="footer">
    
    <!-- end footer -->
    </div>
    
    <!-- end extra-container -->
    </div>
    
    </body>
    
    </html>
    Last edited by rangana; 12-22-2008 at 12:23 AM. Reason: Added bbcode

  7. #7
    rangana's Avatar
    Moderator/Allstar

    Status
    Offline
    Join Date
    Feb 2008
    Location
    Cebu City Philippines
    Posts
    317

    Re: swapped image links for portfolio

    What do you mean by add a new link? This is the image that is changing:
    Code:
    <img src="images/blank.gif" width="300" height="300" name="blank">
    ...your desire is to be able to surround it with an "<a>" tag? with a link of your choice? ...or something else?
    Checkout my porfolio.
    Please click the button when a member helped you.
    Take time to use Forum's Search function.

  8. #8
    Bigmous's Avatar
    Junior Member

    Status
    Offline
    Join Date
    Dec 2008
    Location
    Sydney, Australia
    Posts
    27

    Re: swapped image links for portfolio

    yh every time that images changes, i want a link representing the new image.

    so i guess for the original image it will be<a href="#">

    'but how do i set a different link 4 each image that replaces it.

    e.g. the 1st small image, might represent google and once hovered over, the larger image of it comes up. which would link to<a href="http://www.google.com></a>

  9. #9
    rangana's Avatar
    Moderator/Allstar

    Status
    Offline
    Join Date
    Feb 2008
    Location
    Cebu City Philippines
    Posts
    317

    Re: swapped image links for portfolio

    See if following these steps help:
    1. Add highlighted:
      Code:
      <a href="default_url.htm"><img src="images/blank.gif" width="300" height="300" name="blank"></a>
    2. ...then you can easily change the href value of that <a> tag by adding highlighted on every link:
      Code:
      <img src="images/small/qc.jpg" width="100" height="100" name="small" border="0" onMouseOver="IMA_swapImage('blank','','images/large/qc.jpg',1);document.blank.parentNode.setAttribute('href','http://www.google.com');">


    Hope that helps.
    Checkout my porfolio.
    Please click the button when a member helped you.
    Take time to use Forum's Search function.

  10. #10
    Bigmous's Avatar
    Junior Member

    Status
    Offline
    Join Date
    Dec 2008
    Location
    Sydney, Australia
    Posts
    27

    Re: swapped image links for portfolio

    ok thanks very much rangana!!!!

    will let you know how it goes as soon as I get home and try it.

    thanks again

    mous

  11. #11
    Bigmous's Avatar
    Junior Member

    Status
    Offline
    Join Date
    Dec 2008
    Location
    Sydney, Australia
    Posts
    27

    Re: swapped image links for portfolio

    yep worked like a charm thanks heaps!!! i also inserted a target="_blank" to open the link in a different window.

    just wondering is there a way to open the different websites within your site's content area without using frames

  12. #12
    rangana's Avatar
    Moderator/Allstar

    Status
    Offline
    Join Date
    Feb 2008
    Location
    Cebu City Philippines
    Posts
    317

    Re: swapped image links for portfolio

    Not as easy as iframe. You need AJAX on that (at least as I am aware). Search for "AJAX reload content".

    Hope that helps.
    Checkout my porfolio.
    Please click the button when a member helped you.
    Take time to use Forum's Search function.



Tags for this Thread