6 Replies Latest reply on May 21, 2015 8:13 AM by theservant

    link css rollover to

    theservant Level 1

      Hi

      apologies for dumb question but how do I link css rollover (button) to a new page

       

      I'm making a portfolio site with index pages that thenl ink to large images

      was always easy with js type rollovers in Properties Inspector ...

       

      any help very welcome

      thanks

        • 1. Re: link css rollover to
          Jon Fritz II Adobe Community Professional & MVP

          The answer to that really depends on what you have right now for the code of the page. Could you post a link to your work in progress?

          • 2. Re: link css rollover to
            Nancy OShea Adobe Community Professional & MVP

            Typically, the code for a hyperlinked image looks like this:

            <a href="new_page.html"><img src="your_button_image.jpg"></a>

             

            For viewing large images in thumbnail photo galleries, modal windows or lightboxes are popular. 

            This example uses Fancybox.

            Sample Photo Gallery

             

             

            Nancy O.

            1 person found this helpful
            • 3. Re: link css rollover to
              theservant Level 1

              great, thanks

              Untitled Document

              html & css below

              <!doctype html>

              <html class="">

              <head>

              <meta charset="UTF-8">

              <meta name="viewport" content="width=device-width, initial-scale=1">

              <title>Untitled Document</title>

              <link href="boilerplate.css" rel="stylesheet" type="text/css">

              <link href="rhs2015e.css" rel="stylesheet" type="text/css">

               

               

               

               

              <script src="respond.min.js"></script>

              </head>

              <body>

                <div class="gridContainer clearfix">

                <div id="div1" class="fluid"><div class="gridContainer clearfix">

              <div id="div1rhs" class="rhs_title"><img src="TITLES/rhs_title.png" alt="" class="rhs_title"/></div>

              <div id="div1pp_btn" class="fluid"><a href="#" class="rollover"><span class="move">prodphot</span></a></div>

              <img src="hp_image/me-paris-redux.jpg" alt=""/> </div></div>

                </div>

              </body>

              </html>

               

               

              @charset "UTF-8";

              img, object, embed, video {

                max-width: 100%;

              }

               

               

               

               

              .ie6 img {

                width:100%;

              }

               

               

               

               

              .fluid {

                clear: both;

                margin-left: 0;

                width: 100%;

                float: left;

                display: block;

              }

               

               

              .fluidList {

                  list-style:none;

                  list-style-image:none;

                  margin:0;

                  padding:0;       

              }

              body {

              background-color: #666666;

                margin-left: 100px;

                margin-top: 25px;

                height: 100%;

              }

              rhs img {

                margin-left: 200px;

              }

              .rollover {

                background-position: 0px 0%;

                width: 320px;

                height: 30px;

                display: block;

                text-decoration: none;

                background-image: url(TITLES/productionphotography_title.png);

                padding-left: 0px;

                margin-top: -28px;

                margin-left: 341px;

                padding-top: 3px;

              }

              a.rollover:hover {

                background-position: -320px 0px;

                background-repeat: no-repeat;

                margin-top: -28px;

                margin-left: -20px;

              }

              hp_image img   {

                margin-left: 100px;

                width: 100%;

                min-height: 650px;

                margin-top: -36px;

              }

              .move {

                position: absolute;

                left: -5000px;

              }

               

               

              /* Mobile Layout: 480px and below. */

               

              .gridContainer {

                margin-left: auto;

                margin-right: auto;

                width: 86.45%;

                padding-left: 2.275%;

                padding-right: 2.275%;

                clear: none;

                float: none;

              }

              #div1 {

              }

              .zeroMargin_mobile {

                  margin-left: 0;

              }

              .hide_mobile {

                  display: none;

              }

               

               

              /* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout. */

               

               

              @media only screen and (min-width: 481px) {

               

               

              .gridContainer {

                width: 90.675%;

                padding-left: 1.1625%;

                padding-right: 1.1625%;

                clear: none;

                float: none;

                margin-left: auto;

              }

              #div1 {

              }

              .zeroMargin_tablet {

                  margin-left: 0;

              }

              .hide_tablet {

                  display: none;

              }

              #div1rhs .rhs_title {

                margin-left: -100px;

              }

              #div1pp_btn .rollover {

                margin-left: -100px;

                margin-top: 0px;

              }

              .gridContainer.clearfix img {

                margin-left: -100px;

              }

              }

               

               

              /* Desktop Layout: 769px to a max of 1232px.  Inherits styles from: Mobile Layout and Tablet Layout. */

               

               

              @media only screen and (min-width: 769px) {

               

               

              .gridContainer {

                width: 88.5%;

                max-width: 1200px;

                padding-left: 0.75%;

                padding-right: 0.75%;

                margin: auto;

                clear: none;

                float: none;

                margin-left: auto;

              }

              #div1 {

              }

              .zeroMargin_desktop {

                  margin-left: 0;

              }

              .hide_desktop {

                  display: none;

              }

              #div1rhs .rhs_title {

                margin-left: -100px;

              }

              #div1 .gridContainer.clearfix img {

              }

              #div1rhs .rhs_title {

                margin-left: -100px;

              }

              #div1pp_btn .rollover {

                margin-left: -100px;

                margin-top: 0px;

              }

              .gridContainer.clearfix img {

                margin-left: -100px;

              }

              }

               

               

              @media screen and (min-width:1200px){

              .gridContainer {

                width: 88.5%;

                max-width: 1200px;

                padding-left: 0.75%;

                padding-right: 0.75%;

                margin: auto;

                clear: none;

                float: none;

                margin-left: auto;

              }

              #div1 {

              }

              .zeroMargin_desktop {

                margin-left: 0;

              }

              #div1rhs .rhs_title {

                margin-left: -100px;

              }

              #div1 .gridContainer.clearfix img {

                margin-left: -50px;

              }

              #div1rhs .rhs_title {

                margin-left: -100px;

              }

              #div1pp_btn .rollover {

                margin-left: 341px;

                margin-top: -28px;

              }

              .gridContainer.clearfix img {

                margin-left: -50px;

              }

              }

               

               

              @media screen and (max-width:480px) and (max-height:600px){

              .gridContainer {

                width: 90.675%;

                padding-left: 1.1625%;

                padding-right: 1.1625%;

                clear: none;

                float: none;

                margin-left: auto;

              }

              #div1 {

              }

              .zeroMargin_tablet {

                margin-left: 0;

              }

              .hide_tablet {

                display: none;

              }

              #div1rhs .rhs_title {

                margin-left: -100px;

              }

              #div1pp_btn .rollover {

                margin-left: -100px;

                margin-top: 0px;

              }

              .gridContainer.clearfix img {

                margin-left: -100px;

              }

              }

              • 4. Re: link css rollover to
                theservant Level 1

                thanks but none of the proprietary galleries/plug-ins really work for me

                I need to be a bit more distinctive

                • 5. Re: link css rollover to
                  Nancy OShea Adobe Community Professional & MVP

                  Form follows function.  You can't be distinctive if your site doesn't work.

                   

                  Nancy O.

                  • 6. Re: link css rollover to
                    theservant Level 1

                    true dat!

                     

                    thanks for the code copied below, I've tried it out and put in my new_page and button image

                     

                    hover changes the state but how using the code below how do I get the 'sprite' rollover.png I made to complete the link?

                     

                    <a href="new_page.html"><img src="your_button_image.jpg"></a>


                    thanks again for your time & patience