Loading ...
Sorry, an error occurred while loading the content.

Background images need to rollover

Expand Messages
  • whitefire4001
    Hi all, I m new to this forum..but not to web development...however I am not good with Javascript and I m looking for some help. I have a client that I m
    Message 1 of 4 , Dec 5, 2005
    • 0 Attachment
      Hi all,

      I'm new to this forum..but not to web development...however I am not
      good with Javascript and I'm looking for some help.

      I have a client that I'm developing an ecommerce site for. The
      challenge I'm facing is that they want the background image behind the
      product description to change to another color (from white to green)
      when the button for more information is clicked.

      http://www.bhbws.com/CNI/index.asp

      I thought I could do this with CSS (and would prefer that since I
      understand CSS) but it's looking like I might have to have Javascript
      do it for me (which I don't fully understand).

      If someone could look at the above link and tell me how to do this via
      CSS (prefered) or help me with the Javascript code or tell me who to
      hire (inexpensively) to do this for me I would greatly appreciate it.

      Contacting me off list is fine.

      Thanks in advance...I greatly appreciate any time and suggustions
      offered to get this done.

      Debi
    • Rafael C.P.
      What was your problem with CSS? The :hover selector in IE? Since IE only supports hover in tags, you must use links to create your images. .image1 {
      Message 2 of 4 , Dec 5, 2005
      • 0 Attachment
        What was your problem with CSS? The :hover selector in IE?
        Since IE only supports hover in <a> tags, you must use links to create
        your images.

        .image1 { background: url(image1w.jpg); }
        .image1:hover { background: url(image1g.jpg); }

        Other approach would be to insert onMouseOver events on each image
        through JS. Something like this:
        function IEHoverPseudo() {
        var navItems =
        document.getElementById(\"container\").getElementsByTagName(\"img\");
        for (var i=0; i<navItems.length; i++) {
        navItems[i].onmouseover=function() { this.oldClass =
        this.className; this.className += \" image_over\"; }
        navItems[i].onmouseout=function() { this.className =
        this.oldClass; }
        }
        }
        window.onload = IEHoverPseudo;

        Rafael C.P.

        whitefire4001 wrote:

        >Hi all,
        >
        >I'm new to this forum..but not to web development...however I am not
        >good with Javascript and I'm looking for some help.
        >
        >I have a client that I'm developing an ecommerce site for. The
        >challenge I'm facing is that they want the background image behind the
        >product description to change to another color (from white to green)
        >when the button for more information is clicked.
        >
        >http://www.bhbws.com/CNI/index.asp
        >
        >I thought I could do this with CSS (and would prefer that since I
        >understand CSS) but it's looking like I might have to have Javascript
        >do it for me (which I don't fully understand).
        >
        >If someone could look at the above link and tell me how to do this via
        >CSS (prefered) or help me with the Javascript code or tell me who to
        >hire (inexpensively) to do this for me I would greatly appreciate it.
        >
        >Contacting me off list is fine.
        >
        >Thanks in advance...I greatly appreciate any time and suggustions
        >offered to get this done.
        >
        >Debi
        >
        >
        >
        >
        >
        >
        >
        >
        >
        >
        >
        >
        >
        >Yahoo! Groups Links
        >
        >
        >
        >
        >
        >
        >
        >
        >
        >
        >
      • jon@hiveminds.net
        Swapping background images using JS is problematic, because there s no way to preload them in this case, which means that users on slow connections might never
        Message 3 of 4 , Dec 6, 2005
        • 0 Attachment
          Swapping background images using JS is problematic, because there's no way
          to preload them in this case, which means that users on slow connections
          might never see the swap, and you'll get an annoying delay even on a fast
          connection. Use either a straight image swap or use (better IMO) CSS to set
          the (text) link styles and :hover to swap the foreground and background
          colours.

          <a href="somepage.asp" class="lozenge">Products</a>

          ...

          a.lozenge {display:block; width:60px, height:25px;
          background-image:url('lozenge.gif'); font:normal normal 10px sans-serif;
          color:#000; background-color:#FFF; text-align:center;}

          a.lozenge:hover {color:#FFF; background-color:#9F9;}

          Of course, you'll need to fine-tune the styles yourself to obtain the right
          sizing etc., but that's the general idea.

          (In other words, force the A element to be displayed as a block rather than
          inline, use a transparent background image for the lozenge shape's border
          only, make the text actual text, and then use CSS :hover to change the
          foreground and background colors.)

          Original Message:
          -----------------
          Date: Mon, 05 Dec 2005 22:17:58 -0200
          From: "Rafael C.P." <rcparts@...>
          Subject: Re: Background images need to rollover

          What was your problem with CSS? The :hover selector in IE?
          Since IE only supports hover in <a> tags, you must use links to create
          your images.

          .image1 { background: url(image1w.jpg); }
          .image1:hover { background: url(image1g.jpg); }

          Other approach would be to insert onMouseOver events on each image
          through JS. Something like this:
          function IEHoverPseudo() {
          var navItems =
          document.getElementById(\"container\").getElementsByTagName(\"img\");
          for (var i=0; i<navItems.length; i++) {
          navItems[i].onmouseover=function() { this.oldClass =
          this.className; this.className += \" image_over\"; }
          navItems[i].onmouseout=function() { this.className =
          this.oldClass; }
          }
          }
          window.onload = IEHoverPseudo;

          Rafael C.P.

          whitefire4001 wrote:

          >Hi all,
          >
          >I'm new to this forum..but not to web development...however I am not
          >good with Javascript and I'm looking for some help.
          >
          >I have a client that I'm developing an ecommerce site for. The
          >challenge I'm facing is that they want the background image behind the
          >product description to change to another color (from white to green)
          >when the button for more information is clicked.
          >
          >http://www.bhbws.com/CNI/index.asp
          >
          >I thought I could do this with CSS (and would prefer that since I
          >understand CSS) but it's looking like I might have to have Javascript
          >do it for me (which I don't fully understand).
          >
          >If someone could look at the above link and tell me how to do this via
          >CSS (prefered) or help me with the Javascript code or tell me who to
          >hire (inexpensively) to do this for me I would greatly appreciate it.
          >
          >Contacting me off list is fine.
          >
          >Thanks in advance...I greatly appreciate any time and suggustions
          >offered to get this done.
          >
          >Debi




          --------------------------------------------------------------------
          mail2web - Check your email from the web at
          http://mail2web.com/ .
        • Deborah Carpadus
          Thank you....too late tonight to run it thru my tired brain...but I will look at your suggestion in the morning. Thank you for taking the time to respond...I
          Message 4 of 4 , Dec 6, 2005
          • 0 Attachment
            Thank you....too late tonight to run it thru my tired brain...but I will
            look at your suggestion in the morning.

            Thank you for taking the time to respond...I greatly appreciate it.

            Debi

            At 09:41 PM 12/6/2005 -0500, you wrote:
            >Swapping background images using JS is problematic, because there's no way
            >to preload them in this case, which means that users on slow connections
            >might never see the swap, and you'll get an annoying delay even on a fast
            >connection. Use either a straight image swap or use (better IMO) CSS to set
            >the (text) link styles and :hover to swap the foreground and background
            >colours.
            >
            ><a href="somepage.asp" class="lozenge">Products</a>
            >
            >...
            >
            >a.lozenge {display:block; width:60px, height:25px;
            >background-image:url('lozenge.gif'); font:normal normal 10px sans-serif;
            >color:#000; background-color:#FFF; text-align:center;}
            >
            >a.lozenge:hover {color:#FFF; background-color:#9F9;}
            >
            >Of course, you'll need to fine-tune the styles yourself to obtain the right
            >sizing etc., but that's the general idea.
            >
            >(In other words, force the A element to be displayed as a block rather than
            >inline, use a transparent background image for the lozenge shape's border
            >only, make the text actual text, and then use CSS :hover to change the
            >foreground and background colors.)
            >
            >Original Message:
            >-----------------
            > Date: Mon, 05 Dec 2005 22:17:58 -0200
            > From: "Rafael C.P." <rcparts@...>
            >Subject: Re: Background images need to rollover
            >
            >What was your problem with CSS? The :hover selector in IE?
            >Since IE only supports hover in <a> tags, you must use links to create
            >your images.
            >
            >.image1 { background: url(image1w.jpg); }
            >.image1:hover { background: url(image1g.jpg); }
            >
            >Other approach would be to insert onMouseOver events on each image
            >through JS. Something like this:
            >function IEHoverPseudo() {
            > var navItems =
            >document.getElementById(\"container\").getElementsByTagName(\"img\");
            > for (var i=0; i<navItems.length; i++) {
            > navItems[i].onmouseover=function() { this.oldClass =
            >this.className; this.className += \" image_over\"; }
            > navItems[i].onmouseout=function() { this.className =
            >this.oldClass; }
            > }
            >}
            >window.onload = IEHoverPseudo;
            >
            >Rafael C.P.
            >
            >whitefire4001 wrote:
            >
            > >Hi all,
            > >
            > >I'm new to this forum..but not to web development...however I am not
            > >good with Javascript and I'm looking for some help.
            > >
            > >I have a client that I'm developing an ecommerce site for. The
            > >challenge I'm facing is that they want the background image behind the
            > >product description to change to another color (from white to green)
            > >when the button for more information is clicked.
            > >
            > ><http://www.bhbws.com/CNI/index.asp>http://www.bhbws.com/CNI/index.asp
            > >
            > >I thought I could do this with CSS (and would prefer that since I
            > >understand CSS) but it's looking like I might have to have Javascript
            > >do it for me (which I don't fully understand).
            > >
            > >If someone could look at the above link and tell me how to do this via
            > >CSS (prefered) or help me with the Javascript code or tell me who to
            > >hire (inexpensively) to do this for me I would greatly appreciate it.
            > >
            > >Contacting me off list is fine.
            > >
            > >Thanks in advance...I greatly appreciate any time and suggustions
            > >offered to get this done.
            > >
            > >Debi
            >
            >
            >
            >
            >--------------------------------------------------------------------
            >mail2web - Check your email from the web at
            ><http://mail2web.com/>http://mail2web.com/ .
            >
            >
            >
            >
            >----------
            >YAHOO! GROUPS LINKS
            >
            > * Visit your group
            > "<http://groups.yahoo.com/group/JavaScript_Official>JavaScript_Official"
            > on the web.
            > *
            > * To unsubscribe from this group, send an email to:
            > *
            > <mailto:JavaScript_Official-unsubscribe@yahoogroups.com?subject=Unsubscribe>JavaScript_Official-unsubscribe@yahoogroups.com
            >
            > *
            > * Your use of Yahoo! Groups is subject to the
            > <http://docs.yahoo.com/info/terms/>Yahoo! Terms of Service.
            >
            >
            >----------

            Founder/ Senior Designer
            Bright Hope Designs, Website Solutions
            ---------------------------------------------------------------------------------------------
            4001 Bright Hope Mine Rd, Kelsey, CA 95667
            Office: 530-295-3351 Cell: 530-409-6577 Fax: 530-622-4191
            http://www.brighthopedesigns.com
            Roadside to Worldwide - Websites that take your business to the next
            level....SUCCESS!

            [Non-text portions of this message have been removed]
          Your message has been successfully submitted and would be delivered to recipients shortly.