SitePoint Sponsor

User Tag List

Results 1 to 7 of 7

Thread: img on img

  1. #1
    SitePoint Member
    Join Date
    Dec 2009
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question img on img

    Hi
    I have a three column layout with header and footer. In the left column I have an image, and I will place another image on top of that image (a rollover image). How do I do that? And how do I make the footer follow the hight of the txtareas above? I'm pretty new to theese things. Thanks in advance

  2. #2
    SitePoint Enthusiast
    Join Date
    Apr 2010
    Location
    Los Angeles, CA
    Posts
    25
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    So just to clarify, you want an image so that when you hover your mouse over it, it changes to your second image? Also, will this image be a link?

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,549
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi, Welcome to Sitepoint

    To make a rollover effect the best way is to create a graphic that holds both states of the image and then just change the background-position on hover.


    If you need to have the actual image in the html and the rollover image is the same size you can do something like this.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Image Rollover</title>
    <style type="text/css">
    #test{
    background:red;
    color:#fff;
    width:300px;
    float:left;
    margin-left:20px;
    padding:20px;
    }
    #test p {float:right;background:#fff;}
    #test a{
        text-decoration:none;
        display:block;
        width:300px;
        height:225px;
        background: url(images/volcano-1-over.jpg) no-repeat left top;
    }
    #test a img {
        border:none;
        display:block;
    }
    #test a:hover{visibility:visible}
    #test a:hover img {display:none;}
    
    </style>
    </head>
    <body>
    <div id="test">
        <h2>Image Rollover</h2>
        <p><a href="#"><img src="images/volcano-1.jpg" width="300" height="225" alt="volcano" /></a></p>
    </div>
    </body>
    </html>
    The image is hidden on hover and the preloaded image that is in the background of the parent element shows through.

    And how do I make the footer follow the hight of the txtareas above?
    In a normal layout you'd need to do nothing as one element will follow another element without any help form you.

    If you have floated elements then you need to set teh footer to clear them.

    If you have used absolute positioning then you can't have a footer under multiple columns at all. Don't use absolute positioning for structural layout unless its a simple structure that doesn't need footers.

    To help more we'd need to see the code you are using.

  4. #4
    SitePoint Member
    Join Date
    Dec 2009
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    No, it is no link

  5. #5
    SitePoint Member
    Join Date
    Dec 2009
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here is my code.
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    <!--
    body {
        text-align: center;
        margin: 0px;
        padding: 0px;
        background: url(bilder/Hessdalen_Bak.jpg) repeat fixed left top;
        font-family: Verdana, Arial, Helvetica, sans-serif;
        font-size: 1em;
        color: #000;
        height: 100&#37;;
        width: 100%;
        border-width: 0px;
        position: absolute;
    }
    
    #wrap {
        text-align: left;
        margin: 0px auto;
        width: 960px;
        background: url(bilder/Bakgrunn_y.png) repeat;
        z-index: auto;
        border-width: 0px;
        height: 1050px;
    }
    
    #topp {
        clear: both;
        height: 120px;
        width: 960px;
        margin-bottom: 12px;
        border-width: 0px;
        position: absolute;
        margin-top: 0px;
        top: 0px;
        background: url(bilder/ToppLogo.jpg);
    }
    #nav {
        font: 1.2em/2em Arial, Helvetica, sans-serif;
        color: #A68F00;
        float: left;
        width: 15%;
        margin-right: 30px;
        border-width: 0px;
        height: 800px;
        margin-top: 120px;
        text-align: left;
    }
    #hoved {
        height: 400px;
        width: 58%;
        border-width: 0px;
        float: left;
        margin-right: 10px;
        font: 0.9em/1.1em Arial, Helvetica, sans-serif;
        color: #000;
        margin-top: 120px;
        margin-bottom: 50px;
    }
    #hoyre {
        width: 20%;
        border-width: 0px;
        float: right;
        height: 800px;
        font: 0.9em/1em Tahoma, Geneva, sans-serif;
        color: #000;
        margin-top: 120px;
        overflow: visible;
        margin-left: 10px;
    }
    #footer {
        font: 0.7em Verdana, Geneva, sans-serif;
        width: 960px;
        border-width: 0px;
        clear: both;
        height: 20px;
        padding: 12px 0px;
        text-align: center;
        color: #000;
        background: #FFC url(bilder/images/FooterSlice.png) repeat;
        float: left;
        margin-bottom: 0px;
        margin-top: 112px;
    }
    
    /* Formatering av overskrifter */
    a {
        size: 1.1em;
        margin-top: 0;
        margin-bottom: 1em;
        line-height: 150%;
    }
    p {
        margin-top: 0;
        margin-bottom: 1em;
        line-height: 150%;
        }
    ul li a {
        font: 1em Arial, Helvetica, sans-serif;
        text-align: right;
    }
    h1 {
        font-size: 1.8em;
        font-weight: normal;
        margin-left: -10px;
        margin-bottom: 4px;
        }
    h2 {
    
        font-size: 1.45em;
        margin-left: -10px;
        margin-bottom: 0;
        }
    h3 {
        margin-left: -10px;
        margin-bottom: 0;
        font: 1.1em Tahoma, Geneva, sans-serif;
        color: #A68F00;
        }
    h4 {
        font-size: 1.1em;
        margin-left: -10px;
        margin-bottom: 0;
        }
    h5 {
        font-size: 1em;
        margin-left: -10px;
        margin-bottom: 0;
        }
    strong {
        color:#F00;
    }
    
    /* Formatering av hyperlenker */
    a:link {
        color: #B4A12C;
        text-decoration: none
    }
    a:visited {
        color: #A68F00;
        text-decoration: none
    }
    a:hover {
        color: #290671;
        text-decoration: none
    }
    #wrap #nav #romservice {
        margin-top: 80px;
        margin-left: -50px;
        margin-bottom: 0px;
        float: left;
        clear: right;
    }
    #wrap #nav #burger {
        z-index: 5000;
        position: static;
        height: 80px;
        width: 150px;
        margin: -190px 0px 0px -70px;
        clear: both;
    }
    
    -->
    </style>
    <script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
    <link href="SpryAssets/SpryMenuBarVertical.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript">
    <!--
    function MM_swapImgRestore() { //v3.0
      var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
    }
    function MM_preloadImages() { //v3.0
      var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
        var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
        if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
    }
    
    function MM_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=MM_findObj(n,d.layers[i].document);
      if(!x && d.getElementById) x=d.getElementById(n); return x;
    }
    
    function MM_swapImage() { //v3.0
      var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
       if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
    }
    //-->
    </script>
    </head>
    
    <body onload="MM_preloadImages('bilder/lysIcon_1.jpg')">
    <div id="wrap">
      <div id="topp"><a href="index.html"></a></div>
      
      <div id="nav">
       <ul id="MenuBar1" class="MenuBarVertical">
         <li><a class="MenuBarItemSubmenu" href="index.html">Turistsenteret</a>
           <ul>
             <li><a href="priser">Priser</a></li>
    </ul>
         </li>
         <li><a href="" class="MenuBarItemSubmenu">UFO-senteret</a>
           <ul>
             <li><a href="#">&Aring;len kommune</a></li>
           </ul>
         </li>
         <li><a class="MenuBarItemSubmenu" href="#">Lysfenomenet</a>
           <ul>
                 <li><a href="#">Lysende kuler</a></li>
                <li><a href="#">Muligheter</a></li>
             <li><a href="#">Prosjekt Hessdalen</a></li>
             <li><a href="#">Teorier</a></li>
             <li><a href="#">Unders&#248;kelser</a></li>
           </ul>
         </li>
         <li><a href="#">UFO-safari</a></li>
         <li><a href="#">Linker</a></li>
       </ul>
    <p>&nbsp;</p>
    <img src="bilder/Romservice.png" alt="papirlapp" width="193" height="193" id="romservice" />
    <a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('burger','','bilder/lysIcon_1.jpg',1)"><img src="bilder/burgerLiten.jpg" alt="mat" width="150" height="80" border="0" id="burger" /></a></div>
    
      
      <div id="hoved">
        <p><img src="bilder/sengekammer.jpg" width="556" height="357"/></p><h1><strong>U</strong>tenfor <strong>F</strong>lyr <strong>O</strong>verraskelser</h1>
    <p>Velkommen til Hessdalen Turistsenter. Her er det muligheter for jakt, fiske og overraskelser fra det ytre rom. Hessdalsfenomenet, de lysende objektene, som lyser opp
      himmelen over oss fra tid til annen, har fulgt oss i generasjoner. </p>
    
    <p>Vi kan tilby god mat, og drikke. Spennende naturopplevelser. Godt jaktterreng - reinsdyr, elg og storfugl. Elver og innsj&#248;er med gode fiskemuligheter. </p>
    
    <p>Trenger du bare &#229; komme bort litt, kan vi tilby SPA, sunn kost, eller 86 sorter &#248;l, ROM-f&#248;lelse, ROM og cola, burgere i hopetall, med ROM-burgeren som v&#229;r spesialitet.</p>
    <p>&nbsp;</p>
    <p><a href="priser" />Her kan du bestille rom:</a></p>
    
      </div>
      
      <div id="hoyre"><p>&nbsp;</p>
    <p><img src="bilder/KartNorge.gif" alt="Norgeskart" />
    Hessdalen Turistsenter,<br />
    Hessdalen, 7380 &#197;len<br />
    </p>
    <p>e-post:
      turistsenter@hessdalen.no<br />
    </p></div>
      
      <div id="footer">
        <p>&copy; Hessdalen Turistsenter, 7380 &#197;len  <strong>|</strong>   snekret sammen av tromslo</p></div>
    </div>
    <script type="text/javascript">
    <!--
    var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
    //-->
    </script>
    </body>
    </html>
    Last edited by Paul O'B; Apr 21, 2010 at 02:18. Reason: [ code ] tags added

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,549
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    You need to remove the heights from all those main columns as the height should be dictated by the content and not by you.

    The absolute header doesn't need to be absolute so put it back in the flow.

    Your columns widths don't add up correctly. Remove the percentage widths and make it pixel widths because you only have a fixed pixel container width to work in so percentages just make things harder as you have to calculate them into exact pixel measurements to make them fit.

    The left column is not wide enough for its content and it overlaps the middle column. reduce the content in the left column and take care of margin and padding on uls.

    Here is a very rough guide of how to get the columns lining up correctly.
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    <!--
    html,body{
        margin:0;
        padding:0;
        height:100&#37;;
    }
    img{border:none}
    body {
        text-align: center;
        background: url(bilder/Hessdalen_Bak.jpg) repeat fixed left top;
        font-family: Verdana, Arial, Helvetica, sans-serif;
        font-size: 1em;
        color: #000;
        border-width: 0px;/*position: absolute;*/
    }
    #wrap {
        text-align: left;
        margin: 0px auto;
        width: 960px;
        background:red url(bilder/Bakgrunn_y.png) repeat;
        /*z-index: auto;*/
        border-width: 0px;
        /*height: 1050px;*/
        overflow:hidden;/* clear:flfoats*/
    }
    #topp {
        clear: both;
        height: 120px;
        width: 960px;
        margin-bottom: 12px;
        border-width: 0px;
        /*position: absolute;*/
        margin-top: 0px;
        top: 0px;
        background:green url(bilder/ToppLogo.jpg);
    }
    #nav {
        font: 1.2em/2em Arial, Helvetica, sans-serif;
        color: #A68F00;
        float: left;
        width: 180px;
        margin-right: 10px;
        border-width: 0px;
        /*height: 800px;*/
        /*margin-top: 120px;*/
        text-align: left;
    }
    #nav ul{
        margin:0 0 0 20px;
        padding:0;
    }
    #hoved {
        /*height: 400px;*/
        width: 556px;
        border-width: 0px;
        float: left;
        margin-right: 10px;
        font: 0.9em/1.1em Arial, Helvetica, sans-serif;
        color: #000;
        /*margin-top: 120px;*/
        margin-bottom: 50px;
    }
    #hoyre {
        width: 180px;
        border-width: 0px;
        float: right;
        /*height: 800px;*/
        font: 0.9em/1em Tahoma, Geneva, sans-serif;
        color: #000;
        /*    margin-top: 120px;*/
        overflow: visible;
        margin-left: 10px;
    }
    #footer {
        font: 0.7em Verdana, Geneva, sans-serif;
        width: 960px;
        border-width: 0px;
        clear: both;
        height: 20px;
        padding: 12px 0px;
        text-align: center;
        color: #000;
        background: #FFC url(bilder/images/FooterSlice.png) repeat;
        float: left;
        margin-bottom: 0px;/*margin-top: 112px;*/
    }
    /* Formatering av overskrifter */
    a {
        size: 1.1em;
        margin-top: 0;
        margin-bottom: 1em;
        line-height: 150%;
    }
    p {
        margin-top: 0;
        margin-bottom: 1em;
        line-height: 150%;
    }
    ul li a {
        font: 1em Arial, Helvetica, sans-serif;
        text-align: right;
    }
    h1 {
        font-size: 1.8em;
        font-weight: normal;
        margin-left: -10px;
        margin-bottom: 4px;
    }
    h2 {
        font-size: 1.45em;
        margin-left: -10px;
        margin-bottom: 0;
    }
    h3 {
        margin-left: -10px;
        margin-bottom: 0;
        font: 1.1em Tahoma, Geneva, sans-serif;
        color: #A68F00;
    }
    h4 {
        font-size: 1.1em;
        margin-left: -10px;
        margin-bottom: 0;
    }
    h5 {
        font-size: 1em;
        margin-left: -10px;
        margin-bottom: 0;
    }
    strong {
        color:#F00;
    }
    /* Formatering av hyperlenker */
    a:link {
        color: #B4A12C;
        text-decoration: none
    }
    a:visited {
        color: #A68F00;
        text-decoration: none
    }
    a:hover {
        color: #290671;
        text-decoration: none
    }
    #wrap #nav #romservice {
        margin-top: 80px;
        margin-left: -50px;
        margin-bottom: 0px;
        float: left;
        clear: right;
    }
    #wrap #nav #burger {
        z-index: 5000;
        position: static;
        height: 80px;
        width: 150px;
        margin: -190px 0px 0px -70px;
        clear: both;
    }
    -->
    </style>
    <script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
    <link href="SpryAssets/SpryMenuBarVertical.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript">
    <!--
    function MM_swapImgRestore() { //v3.0
    var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
    }
    function MM_preloadImages() { //v3.0
    var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
    }
    
    function MM_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=MM_findObj(n,d.layers[i].document);
    if(!x && d.getElementById) x=d.getElementById(n); return x;
    }
    
    function MM_swapImage() { //v3.0
    var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
    if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
    }
    //-->
    </script>
    </head>
    <body onload="MM_preloadImages('bilder/lysIcon_1.jpg')">
    <div id="wrap">
        <div id="topp"><a href="index.html"></a></div>
        <div id="nav">
            <ul id="MenuBar1" class="MenuBarVertical">
                <li><a class="MenuBarItemSubmenu" href="index.html">Turistsenteret</a>
                    <ul>
                        <li><a href="priser">Priser</a></li>
                    </ul>
                </li>
                <li><a href="" class="MenuBarItemSubmenu">UFO-senteret</a>
                    <ul>
                        <li><a href="#">&Aring;len kommune</a></li>
                    </ul>
                </li>
                <li><a class="MenuBarItemSubmenu" href="#">Lysfenomenet</a>
                    <ul>
                        <li><a href="#">Lysende kuler</a></li>
                        <li><a href="#">Muligheter</a></li>
                        <li><a href="#">Prosjekt Hessdalen</a></li>
                        <li><a href="#">Teorier</a></li>
                        <li><a href="#">Unders&#248;kelser</a></li>
                    </ul>
                </li>
                <li><a href="#">UFO-safari</a></li>
                <li><a href="#">Linker</a></li>
            </ul>
            <p> <img src="bilder/Romservice.png" alt="papirlapp" width="193" height="193" id="romservice" /> <a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('burger','','bilder/lysIcon_1.jpg',1)"><img src="bilder/burgerLiten.jpg" alt="mat" width="150" height="80"  id="burger" /></a></p>
        </div>
        <div id="hoved">
            <p><img src="bilder/sengekammer.jpg" width="556" height="357" alt="" /></p>
            <h1><strong>U</strong>tenfor <strong>F</strong>lyr <strong>O</strong>verraskelser</h1>
            <p>Velkommen til Hessdalen Turistsenter. Her er det muligheter for jakt, fiske og overraskelser fra det ytre rom. Hessdalsfenomenet, de lysende objektene, som lyser opp
                himmelen over oss fra tid til annen, har fulgt oss i generasjoner. </p>
            <p>Vi kan tilby god mat, og drikke. Spennende naturopplevelser. Godt jaktterreng - reinsdyr, elg og storfugl. Elver og innsj&#248;er med gode fiskemuligheter. </p>
            <p>Trenger du bare &#229; komme bort litt, kan vi tilby SPA, sunn kost, eller 86 sorter &#248;l, ROM-f&#248;lelse, ROM og cola, burgere i hopetall, med ROM-burgeren som v&#229;r spesialitet.</p>
            <p>&nbsp;</p>
            <p><a href="priser">Her kan du bestille rom</a></p>
        </div>
        <div id="hoyre">
            <p>&nbsp;</p>
            <p><img src="bilder/KartNorge.gif" alt="Norgeskart" /> Hessdalen Turistsenter,<br />
                Hessdalen, 7380 &#197;len<br />
            </p>
            <p>e-postbr turistsenter@hessdalen.no</p>
        </div>
        <div id="footer">
            <p>&copy; Hessdalen Turistsenter, 7380 &#197;len <strong>|</strong> snekret sammen av tromslo</p>
        </div>
    </div>
    <script type="text/javascript">
    <!--
    var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
    //-->
    </script>
    </body>
    </html>
    What you should do is write down all the column widths and margins that you need and add then up including padding and margin and make sure that they fit across. You would then need to ensure that the content that sits in the columns is also the correct width. Long unbroken words in narrow columns can cause the layout to break.

    You say your image rollover is not a link so why do you want it to rollover? Most people expect rollover effects to be some kind of link unless they are a gallery effect or similar.

    Regardless of whether the image is a link or not the techniques are the same as I mentioned earlier and you would use another element in place of the anchor. The ony difference being that IE6 won't work because it only understand hover effects on anchors.

    Hope that's a start

  7. #7
    SitePoint Member
    Join Date
    Dec 2009
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thank's a lot!!!!!


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
  •