CSS image "mouseover"

Collapse
This topic is closed.
X
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • al
    #1

    CSS image "mouseover"

    Hi,

    I've been trying to create a image mouseOver effect using CSS - is
    this possible? Or will I have to use DIV tags or something along
    those lines?

    I've tried a number of things - the code below will work for the
    border no problem, but I can't seem to get the SRC to work - is this
    not an option in CSS?

    Thanks in advance,
    al :)


    <a href="" class="abroad"> <img src="./graphics/images/abroadBw.jpg"
    border=1><br>ab road</a>

    A.abroad IMG
    {
    BORDER-COLOR: white;
    SRC: "./graphics/images/abroadBw.jpg"
    }
    A.abroad:hover IMG
    {
    BORDER-COLOR: black;
    SRC: "./graphics/images/abroad.jpg"
    }
    Tags: css mouseover, mouseover css
    • Jukka K. Korpela
      #2
      Re: CSS image &quot;mouseover &quot;

      alastairslater@ hotmail.com (al) wrote:
      [color=blue]
      > I've been trying to create a image mouseOver effect using CSS - is
      > this possible?[/color]

      Depends on what you mean by that.
      [color=blue]
      > but I can't seem to get the SRC to work - is this
      > not an option in CSS?[/color]

      If you need to ask, then you need to start learning CSS, instead of
      imagining you know something about it. CSS does not work by making
      programs guess what you want.

      In most cases, image mouseover effects have been "traditiona lly" written
      to make text change appearance, using JavaScript-dependent image swapping.
      The CSS approach is to use text for textual links and to change the
      properties (such as text and background color) of the elements.

      --
      Yucca, http://www.cs.tut.fi/~jkorpela/

        Comment

        • viza
          #3
          Re: CSS image &quot;mouseover &quot;

          and then al said:
          [color=blue]
          > I've been trying to create a image mouseOver effect using CSS
          >
          > A.abroad IMG {
          > BORDER-COLOR: white;
          > SRC: "./graphics/images/abroadBw.jpg"[/color]

          There's no CSS property 'src'. You cannot do this in CSS and this is
          deliberate and with good reason. An image in a page is page content and
          CSS has nothing to do with content*, only how content is displayed.

          Use javascript:

          <img alt="Off alternate text" src="off.jpg"
          onmouseover="th is.src='on.jpg' ;this.alt='On alternate text';"
          onmouseout="thi s.src='off.jpg' ;this.alt='Off alternate text';">

          Remember that in abscence of javscript you will only get off.png.

          If you havn't already got it, you need this in your head:
          <meta http-equiv="Content-Script-Type" content="text/javascript">

          (* apart from generated content, but lets not talk about that)

            Comment

            • William Starr Moake
              #4
              Re: CSS image &quot;mouseover &quot;

              On 9 Aug 2003 03:06:27 -0700, alastairslater@ hotmail.com (al) wrote:
              [color=blue]
              >Hi,
              >
              >I've been trying to create a image mouseOver effect using CSS - is
              >this possible? Or will I have to use DIV tags or something along
              >those lines?[/color]

              I found the following vertical menu the other day on a CSS website:

              <HTML>
              <HEAD>
              <TITLE>CSS2 Vertical Rollovers</TITLE>
              <STYLE>
              H4 {
              PADDING-RIGHT: 0.3em; PADDING-LEFT: 0.3em; PADDING-BOTTOM:
              0.3em; MARGIN: 0px; PADDING-TOP: 0.3em; TEXT-ALIGN: center
              }
              DIV.menu {
              BORDER-RIGHT: #000 2px solid; PADDING-RIGHT: 0px; BORDER-TOP:
              #000 2px solid; PADDING-LEFT: 0px; BACKGROUND: #fff7ad;
              PADDING-BOTTOM: 0px; MARGIN: 1em; BORDER-LEFT: #000 2px solid; WIDTH:
              100px; PADDING-TOP: 0px; BORDER-BOTTOM: #000 2px solid
              }
              DIV.menu A {
              PADDING-RIGHT: 0.3em; BORDER-TOP: #000 1px solid; DISPLAY:
              block; PADDING-LEFT: 0.3em; FONT-WEIGHT: bold; PADDING-BOTTOM: 0.3em;
              MARGIN: 1px; WIDTH: 100%; COLOR: #00f; PADDING-TOP: 0.3em; TEXT-ALIGN:
              center; TEXT-DECORATION: none
              }
              UNKNOWN {
              WIDTH: auto
              }
              DIV.menu A:hover {
              BACKGROUND: #fc0; COLOR: #00f
              }
              </STYLE>
              </HEAD>
              <BODY>
              <DIV class=menu>
              <H4>Menu Title</H4><A
              href="http://www.websiteopti mization.com/products/">Products
              <BR></A><A
              href="http://www.websiteopti mization.com/services/">Services
              <BR></A><A
              href="http://www.websiteopti mization.com/about/">About <BR></A><A
              href="http://www.websiteopti mization.com/contact/">Contact
              <BR></A></DIV>
              </BODY>
              </HTML>

                Comment

                • Matt Rushton
                  #5
                  Re: CSS image &quot;mouseover &quot;

                  you can do css image rollovers but you dont really have the amount of
                  control that you can get with JS.

                  http://www.meyerweb.com/eric/css/edge/popups/demo2.html has a good tutorial
                  on what you can do.

                  Matt

                  "al" <alastairslater @hotmail.com> wrote in message
                  news:f5a0f103.0 308090206.4bf7c c5c@posting.goo gle.com...[color=blue]
                  > Hi,
                  >
                  > I've been trying to create a image mouseOver effect using CSS - is
                  > this possible? Or will I have to use DIV tags or something along
                  > those lines?
                  >
                  > I've tried a number of things - the code below will work for the
                  > border no problem, but I can't seem to get the SRC to work - is this
                  > not an option in CSS?
                  >
                  > Thanks in advance,
                  > al :)
                  >
                  >
                  > <a href="" class="abroad"> <img src="./graphics/images/abroadBw.jpg"
                  > border=1><br>ab road</a>
                  >
                  > A.abroad IMG
                  > {
                  > BORDER-COLOR: white;
                  > SRC: "./graphics/images/abroadBw.jpg"
                  > }
                  > A.abroad:hover IMG
                  > {
                  > BORDER-COLOR: black;
                  > SRC: "./graphics/images/abroad.jpg"
                  > }[/color]


                    Comment

                    • Stephen Poley
                      #6
                      Re: CSS image &quot;mouseover &quot;

                      On Sat, 09 Aug 2003 09:11:33 -1000, William Starr Moake
                      <wsmoake@yahoo. com> wrote:
                      [color=blue]
                      > I found the following vertical menu the other day on a CSS website:[/color]
                      ....[color=blue]
                      >DIV.menu {
                      > BORDER-RIGHT: #000 2px solid; PADDING-RIGHT: 0px; BORDER-TOP:
                      >#000 2px solid; PADDING-LEFT: 0px; BACKGROUND: #fff7ad;
                      >PADDING-BOTTOM: 0px; MARGIN: 1em; BORDER-LEFT: #000 2px solid; WIDTH:
                      >100px; PADDING-TOP: 0px; BORDER-BOTTOM: #000 2px solid
                      >}[/color]

                      Strewth. Welcome to the world of CSS soup. What's wrong with:

                      ..menu { width: 100px; border: 2px solid black; padding: 0; margin: 1em;
                      background-color: #fff7ad; }

                      (other than the width in pixel units, of course).

                      --
                      Stephen Poley

                      404 Not Found
                      http://www.xs4all.nl/~sbpoley/webmatters/

                        Comment

                        • William Starr Moake
                          #7
                          Re: CSS image &quot;mouseover &quot;

                          On Sun, 10 Aug 2003 08:22:32 GMT, "Andrew Thompson"
                          <andrew64@bigNO SPAMpond.com> wrote:
                          [color=blue]
                          >"Stephen Poley" <sbpoley@xs4all .nl> wrote in message
                          >news:voubjv0vr 62qj102i6o4dv76 391k8e0e2r@4ax. com...
                          >[color=green]
                          >> Strewth. Welcome to the....[/color]
                          >
                          >Are you an Aussie, by any chance, Stephen?
                          >
                          >[ For those unfamiliar with it, 'Strewth' is an
                          >expression commonly used by Australians.
                          >It is an abbreviation of "God's Truth" -[/color]

                          Similar to "God's miserable teeth" from J. P. Donleavy's hysterically
                          funny novel "The Ginger Man."

                            Comment

                            • Bob Crispen
                              #8
                              Re: CSS image &quot;mouseover &quot;

                              The voices are telling me that William Starr Moake <wsmoake@yahoo. com>
                              wrote on 10 Aug 2003:
                              [color=blue][color=green]
                              >>[ For those unfamiliar with it, 'Strewth' is an
                              >>expression commonly used by Australians.
                              >>It is an abbreviation of "God's Truth" -[/color]
                              >
                              > Similar to "God's miserable teeth" from J. P. Donleavy's hysterically
                              > funny novel "The Ginger Man."[/color]

                              One of my family's favorite expressions, particularly when we're a little
                              creaky, is "God's wounds, madam!" -- we do our best to mimic the way
                              Keith Michell delivered that line in the _6 Wives of Henry VIII_ series.
                              --
                              Bob Crispen
                              bob.crispen@boe ing.com

                              There's plenty of room for all of God's creatures.
                              Right next to the mashed potatoes.

                                Comment

                                • Mach
                                  #9
                                  Re: CSS image &quot;mouseover &quot;

                                  In article <f5a0f103.03080 90206.4bf7cc5c@ posting.google. com>, al
                                  <alastairslater @hotmail.com> wrote:
                                  [color=blue]
                                  > Hi,
                                  >
                                  > I've been trying to create a image mouseOver effect using CSS - is
                                  > this possible? Or will I have to use DIV tags or something along
                                  > those lines?[/color]
                                  <snip>

                                  You can use z-index's to change the layering of objects. Do some
                                  research on it.

                                  Mach

                                    Comment

                                    Previous template Next
                                    Working...