5 Replies Latest reply on Apr 2, 2010 10:53 AM by pziecina

    Image swap from a ul

    LouisaBoyles Level 1

      Hi,

       

      please see my link http://www.denotestationery.com/denote_localroot1/weddingvintage.html

       

      I am trying to achieve an image swap in the stationerycontainer div that houses the invite image, by rolling over each list item (stationeryinfo ul down the side of the image), as the user rolls over the stationeryinfo ul, the image in the stationerycontainer div will change accordingly.

       

      Is there a way to achieve this by just using the html in the stationeryinfo ul & without the use of images in that list? I basically want it to look like the sidebar nav when you roll over it but I don't need the stationery info list to link to anything.

       

      I hope I am making sense!

        • 1. Re: Image swap from a ul
          pziecina Level 6

          Hi

           

          Do you mean something like what is on this page - http://www.pziecina.com/design/turorial_demos/css_rollover_text.php.

           

          PZ

          www.pziecina.com

          • 2. Re: Image swap from a ul
            LouisaBoyles Level 1

            Hi, yes, well kind of, I don't need the list to link to anything, it's purely to show the user what each design peice looks like by rolling over the list. I have done this before, but with the use of the list as images rather than html. But I want to be able to allow the html to do it instead & as I am a newbie the only way I have found to do it is by adding a link to the code. and then linking is straight back to the same page. Like below.  I hope I am making sense.

             

            Weddingvintage.html is the page the user will be on.

             

            <li><a href="weddingvintage.html" onmouseover="MM_swapImage('vintageday','','denoteWebimages/gallery_chrysanth.gif',1)" onmouseout="MM_swapImgRestore()">Day invitation</a></li>

             

            Is there another attribute rather than the a href that will work with the swap image?

             

            Thanks in advance

            • 3. Re: Image swap from a ul
              pziecina Level 6

              Hi

               

              If you look at the code on the example you would not include the link code so it would become -

              <li><img src="../../images/hubble6.jpg" alt="" width="50" height="25" /><span>
                    <img src="../../images/hubble6.jpg" alt="" width="200" height="100" /></span></li>

              In the css remove the a from the code so instead of, (as an example) -
              li a:hover
              You would have -
              li:hover

               

              PZ

              • 4. Re: Image swap from a ul
                LouisaBoyles Level 1

                Sorry. I am a bit confused. I am adding this to the list html. And it looks like it's adding images to the ul which is what I don't want. I want to somehow have the item list as purely html text as it is on the page at the moment. But want a way around it without using link or img attributes.

                • 5. Re: Image swap from a ul
                  pziecina Level 6

                  Hi

                   

                  You would insert text in place of the image link, but the image you require on the page would be included within this, but it would be displayed in the position you set for it in the css not as part of the list.

                   

                  PZ