Results 1 to 6 of 6

Thread: Help with HTML/Java - iframes or pop ups on onmouseover

  1. #1
    Join Date
    Oct 2013
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Help with HTML/Java - iframes or pop ups on onmouseover

    I have searched the forums for something but I can't quite find what I am looking for. I am working on revamping a webpage in work to make it look tidier and a little more interesting. What I've done is divide the page into sections, I have a static image which links to another page and a rolling screen that links to multiple articles. On the third section I'd like a permanent image that says latest news, but when you hover over it either loads an iframe or a pop up where I can include both images and links. I'm basically trying to cut down on the third column size so that the current news article load in the space provided for that latest news image.

    I've tried have an onmouseover Java script that opened up sub-sections but this couldn't host images, and everywhere I've looked it says that you can't onmouseover to an iframe in html.

    The BBC homepage has some interesting hover over popups but I tried to view source and there's so much data on the page I couldn't pinpoint what I actually needed.

    Thank you for your help!

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,953
    Thanks
    43
    Thanked 3,195 Times in 3,157 Posts
    Blog Entries
    12

    Default

    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,337
    Thanks
    30
    Thanked 137 Times in 132 Posts
    Blog Entries
    32

    Default

    Something like this?
    <head>
    <style>
    .latest_news {position: absolute; top: 100px; width: 300px; height:200px; }
    </style>
    </head>

    <body >
    <div id="div_for_latest_news" ></div>
    <div onmouseover="document.getElementById('div_for_latest_news').innerHTML='<div class=\'latest_news\' style=\'z-index:100; border: 1px solid black\'><div style=\'position: relative; float: right; padding: 20px; background: transparent; width: 100%; height: 100%; margin-right:-20px; margin-top: -20px; \' onmouseover=\'document.getElementById(&quot;div_for_latest_news&quot; ).innerHTML=&quot;&quot;\'><\/div><iframe src=\'http://www.dynamicdrive.com\' style=\'position: absolute; width: 100%; height: 100%\' frameborder=\'0\' ><\/iframe><\/div>';"><img class="latest_news" src="http://www.greekshares.com/uploads/image/latest_news_greekshares.jpg" style="border: 1px solid black; " alt=""></div>
    </body>
    Last edited by molendijk; 10-19-2013 at 04:17 PM.

  4. #4
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,793
    Thanks
    2
    Thanked 418 Times in 412 Posts

    Default

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    <style type="text/css">
    /*<![CDATA[*/
    
    #tst {
     position:absolute;left:100px;top:100px;width:350px;height:263px;border:solid red 1px;
    }
    
    #slide1 {
     position:absolute;z-Index:2;left:0px;top:300px;width:350px;height:265px;background-Color:#FFFFCC;
    }
    
    
    /*]]>*/
    </style></head>
    
    <body>
     <input type="button" name="" value="Toggle" onmouseup="zxcSlidePanelII.Slide('tst');" />
     <input type="button" name="" value="Up" onmouseup="zxcSlidePanelII.Slide('tst',true);" />
     <input type="button" name="" value="Down" onmouseup="zxcSlidePanelII.Slide('tst',false);" />
    
     <div id="tst" >
      <img src="http://www.vicsjavascripts.org.uk/StdImages/WinterPalace.jpg" alt="img" />
      <div id="slide1" ></div>
     </div>
    
    <script type="text/javascript">
    /*<![CDATA[*/
    // Slide Panel II (20-October-2013)
    // by Vic Phillips - http://www.vicsjavascripts.org.uk/StdImages/
    
    var zxcSlidePanelII={
    
     Slide:function(id,ud){
      var o=this['zxc'+id],t;
      if (o){
       ud=typeof(ud)=='boolean'?ud:!o.ud;
       t=o.s[ud?3:2]
       this.animate(o,o.s,o.s[4],t,new Date(),o.ms*Math.abs((o.s[4]-t)/o.s[5]));
       o.ud=ud;
      }
     },
    
     init:function(o){
      var id=o.PanelID,m=o.SlideMode,ms=o.Animate,t=o.EventType,si=o.SlideIn,so=o.SlideOut,s=document.getElementById(id),p=s?s.parentNode:null;
      if (s){
       var pw=p.offsetWidth,ph=p.offsetHeight,sw=s.offsetWidth,sh=s.offsetHeight,md=typeof(m)=='string'?m.charAt(0).toUpperCase():'U',m=m=='D'||m=='L'||m=='R'?m:'U',m=md=='L'||md=='R'?['left',pw,sw]:['top',ph,sh],n=typeof(so)=='number'?so:m[md=='U'||md=='L'?1:2]*(md=='U'||md=='L'?1:-1),t=t!==false?typeof(t)=='string'?t.toLowerCase().replace('on',''):'mouseover':null;
       p.style.overflow='hidden';
       o.s=[s,m[0],n,typeof(si)=='number'?si:md=='U'||md=='L'?m[1]-m[2]:0,n];
       o.s[5]=o.s[2]-o.s[3];
       s.style.position='absolute';
       s.style[m[0]]=o.s[4]+'px';
       o.ud=false;
       o.ms=typeof(ms)=='number'&&ms>20?ms:1000
       if (t=='mouseover'){
        this.addevt(p,'mouseover','Slide',id,true);
        this.addevt(p,'mouseout','Slide',id,false);
       }
       else if (t){
        this.addevt(p,t=='mousedown'||t=='click'?t:'mouseup','Slide',id,null);
       }
       this['zxc'+id]=o;
      }
     },
    
     animate:function(o,a,f,t,srt,mS,s,i){
      clearTimeout(a[6]);
      var oop=this,ms=new Date()-srt,n=(t-f)/mS*ms+f;
      if (isFinite(n)){
       a[4]=n;
       a[0].style[a[1]]=a[4]+'px';
      }
      if (ms<mS){
       a[6]=setTimeout(function(){ oop.animate(o,a,f,t,srt,mS); },10);
      }
      else {
       a[4]=t;
       a[0].style[a[1]]=t+'px';
      }
     },
    
     addevt:function(o,t,f,p,p1){
      var oop=this;
      o.addEventListener?o.addEventListener(t,function(e){ return oop[f](p,p1);},false):o.attachEvent?o.attachEvent('on'+t,function(e){ return oop[f](p,p1); }):null;
     }
    
    }
    
    zxcSlidePanelII.init({
     PanelID:'slide1',     // the unique ID name of the slide element.                   (string)
     SlideMode:'Up',       //(optional) the slide mode, 'Up', 'Down', 'Left' or 'Right . (string, default = Up)
     Animate:1000,         //(optional) the slide duration in millisec.                  (number, default = 1000)
    // SlideIn:224,          //(optional) the slide in position in px.                     (number, default = calculated by the script)
    // SlideOut:264,         //(optional) the slide out position in px.                    (number, default = calculated by the script)
     EventType:'mouseover' //(optional) the actvating event type(see Note 1).            (string, default = 'mouseover')
    });
    
    
    /*
     Note 1.
      The valid event types are:
       'mouseover',
       'mouseup',
       'mousedown',
       'mouseup',
       'click',
       or false = inline event calls
    
    */
    
    /*]]>*/
    </script>
    </body>
    
    </html>
    see http://www.vicsjavascripts.org.uk/Sl...idePanelII.htm
    Last edited by vwphillips; 10-21-2013 at 11:57 AM.
    Vic
    God Loves You and will never love you less.
    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  5. #5
    Join Date
    Oct 2013
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Thank you for your suggestions so far. Unfortunately these don't work quite how I'm aiming for.

    This is the current layout of the page (please mind the borders and alignments, I haven't fixed these yet). Left hand side is a Javascript rolling screen with each image being clickable, centre is a fixed image that when clicks opens a webpage, right hand side is where I want the iframe type link so that when you ‘onmouseover’ it loads the iframe or a pop up within the boundaries of the right hand side panel:

    Click image for larger version. 

Name:	Mock Up.JPG 
Views:	120 
Size:	65.4 KB 
ID:	5261

    I like the popup links as shown on the bbc homepage: http://www.bbc.co.uk/

    When you hover over the chocolate image a popup appears over the image but within the confines of the image size with the relevant news articles.

  6. #6
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,793
    Thanks
    2
    Thanked 418 Times in 412 Posts

    Default

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    <style type="text/css">
    /*<![CDATA[*/
    
    
    .parent {
     position:absolute;top:20px;width:350px;height:263px;border:solid red 1px;
    }
    
    .parent IMG{
     position:absolute;top:0px;width:350px;height:263px;
    }
    
    
    .updown2 {
     position:absolute;z-Index:2;left:0px;top:-300px;width:350px;height:265px;background-Color:#FFFFCC;
    }
    
    
    
    /*]]>*/
    </style>
    <script type="text/javascript">
    /*<![CDATA[*/
    // Slide Panel II (21-October-2013)
    // by Vic Phillips - http://www.vicsjavascripts.org.uk/StdImages/
    
    /*
    
     The script allows panels to slide into or out of a parent DIV element.
    
     The slide in may be Up, Down, Up or Down.
    
     The slide in and out positions may be specified or calculated by the script.
    
     The slide in and out may be activated script by defined event call types
     or by inline event calls.
    
     The functional Code Size is 1.94K.
    
     ****** Application Notes.
    
      **** The HTML and CSS Code.
    
       ** The Side Panel Parent DIV.
        The Side Panel must be nested in a parent DIV
        with a CSS position of 'absolute' or 'relative' and defined width and height.
        The script assigns a CSS overflow of 'hidden' to this DIV on initialization.
    
       ** The Side Panel Element.
        The Side Panel must be nested in a parent DIV and must be assigned a unique ID name.
        The Side Panel Element must have its size, appearance and
        'left'(for Up and Down) or 'top'(for Left and Right) positions.
        defined by CSS rule or inline style.
        The script assigns a CSS position of 'absolute'
        and 'top'(for Up and Down) or 'left'(for Left and Right) positions.
    
     **** Initialization.
    
     Each panel must be initialized after the page has leaded by calling function zxcSlidePanelII.init
      e.g.
       zxcSlidePanelII.init({
        PanelID:'slide1',             // the unique ID name of the slide element.                  (string)
        SlideMode:'Up',               //(optional) the slide mode, 'Up', 'Down', 'Left' or 'Right. (string, default = Up)
        Animate:1000,                 //(optional) the slide duration in millisec.                 (number, default = 1000)
        SlideIn:224,                  //(optional) the slide in position in px.                    (number, default = calculated by the script)
        SlideOut:264,                 //(optional) the slide out position in px.                   (number, default = calculated by the script)
        EventType:'mouseover',        //(optional) the activating event type(see Note 1).          (string, default = 'mouseover')
        SlideStart:function(o,ud){    //(optional) a function to call at slide start.              (function, default = no function)
         //  o  = the script instance object.
         //  ud = true = slide in, false = slide out.
        },
        SlideComplete:function(o,ud){ //(optional) a function to call at slide complete.           (function, default = no function)
         //  o  = the script instance object.
         //  ud = true = slide in, false = slide out.
        }
       });
    
      ** Note 1.
       The valid event types are:
        'mouseover',
        'mouseup',
        'mousedown',
        'mouseup',
        'click',
        or false = inline event calls
    
     **** Controlling the Panel.
    
      In addition to the events specified in the initialization call
      the panel may be controlled by inline event calls to function zxcSlidePanelII.Slide
       <input type="button" name="" value="Toggle" onmouseup="zxcSlidePanelII.Slide('tst');" />
       <input type="button" name="" value="Up" onmouseup="zxcSlidePanelII.Slide('tst',true);" />
       <input type="button" name="" value="Down" onmouseup="zxcSlidePanelII.Slide('tst',false);" />
       where:
        parameter 0 = the unique ID name of the slide element.                 (string)
        parameter 1 = true = slide in, false = slide out or null = toggle.     (boolean, default = 'toggle')
    
    
    */
    
    
    // Functional Code - NO NEED to Change.
    
    var zxcSlidePanelII={
    
     Slide:function(id,ud){
      var o=this['zxc'+id],t;
      if (o){
       ud=typeof(ud)=='boolean'?ud:!o.ud;
       typeof(o.SlideStart)=='function'?o.SlideStart(o,ud):null;
       t=o.s[ud?3:2]
       this.animate(o,o.s,o.s[4],t,new Date(),o.ms*Math.abs((o.s[4]-t)/o.s[5]));
       o.ud=ud;
      }
     },
    
     init:function(o){
      var id=o.PanelID,m=o.SlideMode,ms=o.Animate,t=o.EventType,si=o.SlideIn,so=o.SlideOut,s=document.getElementById(id),p=s?s.parentNode:null;
      if (s){
       var pw=p.offsetWidth,ph=p.offsetHeight,sw=s.offsetWidth,sh=s.offsetHeight,md=typeof(m)=='string'?m.charAt(0).toUpperCase():'U',m=m=='D'||m=='L'||m=='R'?m:'U',m=md=='L'||md=='R'?['left',pw,sw]:['top',ph,sh],n=typeof(so)=='number'?so:m[md=='U'||md=='L'?1:2]*(md=='U'||md=='L'?1:-1),t=t!==false?typeof(t)=='string'?t.toLowerCase().replace('on',''):'mouseover':null;
       p.style.overflow='hidden';
       o.s=[s,m[0],n,typeof(si)=='number'?si:md=='U'||md=='L'?m[1]-m[2]:0,n];
       o.s[5]=o.s[2]-o.s[3];
       s.style.position='absolute';
       s.style[m[0]]=o.s[4]+'px';
       o.ud=false;
       o.ms=typeof(ms)=='number'&&ms>20?ms:1000
       if (t=='mouseover'){
        this.addevt(p,'mouseover','Slide',id,true);
        this.addevt(p,'mouseout','Slide',id,false);
       }
       else if (t){
        this.addevt(p,t=='mousedown'||t=='click'?t:'mouseup','Slide',id,null);
       }
       this['zxc'+id]=o;
      }
     },
    
     animate:function(o,a,f,t,srt,mS,s,i){
      clearTimeout(a[6]);
      var oop=this,ms=new Date()-srt,n=(t-f)/mS*ms+f;
      if (isFinite(n)){
       a[4]=n;
       a[0].style[a[1]]=a[4]+'px';
      }
      if (ms<mS){
       a[6]=setTimeout(function(){ oop.animate(o,a,f,t,srt,mS); },10);
      }
      else {
       a[4]=t;
       a[0].style[a[1]]=t+'px';
       typeof(o.SlideComplete)=='function'?o.SlideComplete(o,o.ud):null;
      }
     },
    
     addevt:function(o,t,f,p,p1){
      var oop=this;
      o.addEventListener?o.addEventListener(t,function(e){ return oop[f](p,p1);},false):o.attachEvent?o.attachEvent('on'+t,function(e){ return oop[f](p,p1); }):null;
     }
    
    }
    
    
    /*]]>*/
    </script>
    <script type="text/javascript" >
    /*<![CDATA[*/
    
    function Init(){
    
    zxcSlidePanelII.init({
     PanelID:'slide1',             // the unique ID name of the slide element.                   (string)
     SlideMode:'Up',               //(optional) the slide mode, 'Up', 'Down', 'Left' or 'Right . (string, default = Up)
     Animate:1000,                 //(optional) the slide duration in millisec.                  (number, default = 1000)
     EventType:'mouseover',              //(optional) the actvating event type(see Note 1).            (string, default = 'mouseover')
     SlideStart:function(o,ud){    //(optional) a function to call at slide start.               (function, default = no function)
      //  o  = the script instance object.
      //  ud = true = slide in, false = slide out.
     },
     SlideComplete:function(o,ud){ //(optional) a function to call at slide complete.            (function, default = no function)
      //  o  = the script instance object.
      //  ud = true = slide in, false = slide out.
     }
    });
    
    }
    
    if (window.addEventListener){
     window.addEventListener('load',Init, false);
    }
    else if (window.attachEvent){
     window.attachEvent('onload',Init);
    }
    
    /*]]>*/
    </script>
    </head>
    
    <body>
     <div class="parent" style="left:65px;" >
      <img src="http://www.vicsjavascripts.org.uk/StdImages/1.gif" alt="img" />
     </div>
     <div class="parent" style="left:445px;" >
      <img src="http://www.vicsjavascripts.org.uk/StdImages/2.gif" alt="img" />
     </div>
     <div class="parent" style="left:825px;" >
      <img src="http://www.vicsjavascripts.org.uk/StdImages/3.gif" alt="img" />
      <iframe id="slide1" src="http://www.vicsjavascripts.org.uk/SlidePanelII/SlidePanelII.htm" class="updown2" ></iframe>
     </div>
    
    
    </body>
    
    </html>
    Vic
    God Loves You and will never love you less.
    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

Similar Threads

  1. onMouseOver problem - photoshop html
    By ojah in forum HTML
    Replies: 3
    Last Post: 08-10-2009, 03:26 AM
  2. HTML, DHTML & Java Applets
    By jayel2k in forum HTML
    Replies: 1
    Last Post: 06-25-2009, 04:48 PM
  3. Replies: 5
    Last Post: 04-02-2007, 12:37 PM
  4. java/html form
    By rmosby in forum JavaScript
    Replies: 1
    Last Post: 03-03-2006, 03:07 PM
  5. iframes w/ referanced html file.... confusing problem
    By scotty.campbell in forum JavaScript
    Replies: 7
    Last Post: 01-15-2006, 04:31 AM

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
  •