Need to know if this is even possible (mouseover mayhem, long)

Discussion in 'Javascript' started by J. Makela, Sep 20, 2004.

  1. J. Makela

    J. Makela Guest

    Hallo.

    This should be a pretty entertaining question for you *real* javascript
    writers.. I, being the lowly photoshop guy at an ad agency made the
    mistake of actually saying "HTML" in a conversation once.. and now I
    have been tasked with building a big website with LOTS of fancy
    javascripting. Image rollovers mostly. Only problem is that I don't
    really know how to do it. Of course, that's of no consequence so I have
    to do it anyway. I've done simple mouseovers, but only for navigation
    and stuff. Swapping out the actual image being moused over is relatively
    easy.

    But, one of the things I need to figure out is how to change 1 image
    into 3 or 4 *different* images when OTHER parts of OTHER images are
    moused over. It's very similar to a normal mouseover, except for the
    fact that the image being moused over isn't the one changing. A
    completely different picture at the bottom of the page needs to change.

    Say there are 3 product names on the page (in an image, not copy or
    text, so it'd be like an imagemap-type link). There is also a box at the
    bottom that shows product 1 at the moment. But, when "Product 2" is
    moused over in the main image, the box at the bottom has to change to
    show Product 2. Same thing with Product 3. Is that even possible? I know
    I've seen it before, but I don't know if it's javascripting that was
    responsible. Is there a better CSS solution? Or was it built in Flash
    and I'm in even more trouble than I think I am?



    Second issue is an image mouseover that changes the color of *text* on
    the page. They roll the pointer over a certain part of an image, and the
    pertinent explanatory text *next* to the image needs to change color, as
    well as having that particular part of the image change as well. Say I
    slice a television JPG into 2 parts.. when you mouseover the screen, it
    changes color AND some text to the right changes color to red. Doable
    with a sliced-up image probably, but is it doable with actual text/copy?
    The images/copy I've been given don't lend themselves to a simple image
    rollover.



    I know this is a pretty stupid post and I have no business meddling with
    powers I don't understand.. the thing I need to know most is if this
    stuff is even *possible*.. all the sample code I've found so far can
    change text and images, but only the text and images being moused over..
    I haven't found anything yet that can change one *separate* image into 3
    different images based on mouseovers or change text colors based on an
    image mouseover.

    Any clues? Hints? Where to start (aside from jumping off a tall
    buliding)? Kinda at the end of my rope here and was hoping somebody
    could point me in the right direction. Thanks very much for any help you
    guys can give, it is appreciated.


    *heavy sigh*
    J
     
    J. Makela, Sep 20, 2004
    #1
    1. Advertising

  2. J. Makela

    McKirahan Guest

    "J. Makela" <> wrote in message
    news:7TE3d.17987$wV.2386@attbi_s54...
    > Hallo.
    >
    > This should be a pretty entertaining question for you *real* javascript
    > writers.. I, being the lowly photoshop guy at an ad agency made the
    > mistake of actually saying "HTML" in a conversation once.. and now I
    > have been tasked with building a big website with LOTS of fancy
    > javascripting. Image rollovers mostly. Only problem is that I don't
    > really know how to do it. Of course, that's of no consequence so I have
    > to do it anyway. I've done simple mouseovers, but only for navigation
    > and stuff. Swapping out the actual image being moused over is relatively
    > easy.
    >
    > But, one of the things I need to figure out is how to change 1 image
    > into 3 or 4 *different* images when OTHER parts of OTHER images are
    > moused over. It's very similar to a normal mouseover, except for the
    > fact that the image being moused over isn't the one changing. A
    > completely different picture at the bottom of the page needs to change.
    >
    > Say there are 3 product names on the page (in an image, not copy or
    > text, so it'd be like an imagemap-type link). There is also a box at the
    > bottom that shows product 1 at the moment. But, when "Product 2" is
    > moused over in the main image, the box at the bottom has to change to
    > show Product 2. Same thing with Product 3. Is that even possible? I know
    > I've seen it before, but I don't know if it's javascripting that was
    > responsible. Is there a better CSS solution? Or was it built in Flash
    > and I'm in even more trouble than I think I am?
    >
    >
    >
    > Second issue is an image mouseover that changes the color of *text* on
    > the page. They roll the pointer over a certain part of an image, and the
    > pertinent explanatory text *next* to the image needs to change color, as
    > well as having that particular part of the image change as well. Say I
    > slice a television JPG into 2 parts.. when you mouseover the screen, it
    > changes color AND some text to the right changes color to red. Doable
    > with a sliced-up image probably, but is it doable with actual text/copy?
    > The images/copy I've been given don't lend themselves to a simple image
    > rollover.
    >
    >
    >
    > I know this is a pretty stupid post and I have no business meddling with
    > powers I don't understand.. the thing I need to know most is if this
    > stuff is even *possible*.. all the sample code I've found so far can
    > change text and images, but only the text and images being moused over..
    > I haven't found anything yet that can change one *separate* image into 3
    > different images based on mouseovers or change text colors based on an
    > image mouseover.
    >
    > Any clues? Hints? Where to start (aside from jumping off a tall
    > buliding)? Kinda at the end of my rope here and was hoping somebody
    > could point me in the right direction. Thanks very much for any help you
    > guys can give, it is appreciated.
    >
    >
    > *heavy sigh*
    > J
    >



    Will this help for the first part?

    Test "as-is"; watch for word-wrap.

    <html>
    <head>
    <title>onmouse.htm</title>
    </head>
    <body>
    <img src="http://www.google.com/images/logo.gif"
    border="0" width="276" height="110" usemap="#google">
    <br>
    <img src="http://www.denijsdesign.de/dd_images/i_allg/xtrans_x_320x320.gif"
    border="0" width="320" height="320" alt="" name="img">
    <map name="google">
    <area shape="RECT" coords="0,0,68,109"
    onmouseover="javascript:eek:nmouse('G')" onmouseout="onmouse('')" alt="G">
    <area shape="RECT" coords="69,0,116,109"
    onmouseover="javascript:eek:nmouse('O')" onmouseout="onmouse('')" alt="O">
    <area shape="RECT" coords="117,0,161,109"
    onmouseover="javascript:eek:nmouse('O')" onmouseout="onmouse('')" alt="O">
    <area shape="RECT" coords="162,0,204,109"
    onmouseover="javascript:eek:nmouse('G')" onmouseout="onmouse('')" alt="G">
    <area shape="RECT" coords="205,0,225,109"
    onmouseover="javascript:eek:nmouse('L')" onmouseout="onmouse('')" alt="L">
    <area shape="RECT" coords="226,0,275,109"
    onmouseover="javascript:eek:nmouse('E')" onmouseout="onmouse('')" alt="E">
    </map>
    <script type="text/javascript">
    var save = document.getElementById("img").src;
    function onmouse(what) {
    var pict;
    if (what != "") {
    pict = "http://www.outdoordecorcentral.com/graphics/BA07L91";
    pict += what.toUpperCase() + ".jpg";
    } else {
    pict = save;
    }
    document.getElementById("img").src = pict;
    }
    </script>
    </body>
    </html>
     
    McKirahan, Sep 20, 2004
    #2
    1. Advertising

  3. On Mon, 20 Sep 2004 19:04:24 GMT, McKirahan <> wrote:

    [snip]

    > <img src="http://www.google.com/images/logo.gif"
    > border="0" width="276" height="110" usemap="#google">
    > <br>
    > <img
    > src="http://www.denijsdesign.de/dd_images/i_allg/xtrans_x_320x320.gif"
    > border="0" width="320" height="320" alt="" name="img">


    [snip]

    > var save = document.getElementById("img").src;


    [snip]

    Interesting. So where is this element, 'img'?

    Mike


    Please trim quotes.

    --
    Michael Winter
    Replace ".invalid" with ".uk" to reply by e-mail.
     
    Michael Winter, Sep 20, 2004
    #3
  4. J. Makela

    McKirahan Guest

    "Michael Winter" <> wrote in message
    news:eek:psem3ofcgx13kvk@atlantis...
    > On Mon, 20 Sep 2004 19:04:24 GMT, McKirahan <> wrote:
    >
    > [snip]
    >
    > > <img src="http://www.google.com/images/logo.gif"
    > > border="0" width="276" height="110" usemap="#google">
    > > <br>
    > > <img
    > > src="http://www.denijsdesign.de/dd_images/i_allg/xtrans_x_320x320.gif"
    > > border="0" width="320" height="320" alt="" name="img">

    >
    > [snip]
    >
    > > var save = document.getElementById("img").src;

    >
    > [snip]
    >
    > Interesting. So where is this element, 'img'?
    >
    > Mike
    >
    >
    > Please trim quotes.
    >
    > --
    > Michael Winter
    > Replace ".invalid" with ".uk" to reply by e-mail.


    "img" is the name assigned at the end of the following tag:

    <img src="http://www.denijsdesign.de/dd_images/i_allg/xtrans_x_320x320.gif"
    border="0" width="320" height="320" alt="" name="img">



    Here's a version that highlights text on mouseover.

    <html>
    <head>
    <title>onmouse.htm</title>
    </head>
    <body>
    <img src="http://www.google.com/images/logo.gif"
    border="0" width="276" height="110" usemap="#google">
    <pre>
    <br><span id="tx1">Google's 1st letter.</span>
    <br><span id="tx2">Google's 2nd letter.</span>
    <br><span id="tx3">Google's 3rd letter.</span>
    <br><span id="tx4">Google's 4th letter.</span>
    <br><span id="tx5">Google's 5th letter.</span>
    <br><span id="tx6">Google's 6th letter.</span>
    </pre>
    <img src="http://www.denijsdesign.de/dd_images/i_allg/xtrans_x_320x320.gif"
    border="0" width="320" height="320" alt="" name="img">
    <map name="google">
    <area shape="RECT" coords="0,0,68,109"
    onmouseover="javascript:eek:nmouse('tx1','G')" onmouseout="onmouse('tx1','')"
    alt="G">
    <area shape="RECT" coords="69,0,116,109"
    onmouseover="javascript:eek:nmouse('tx2','O')" onmouseout="onmouse('tx2','')"
    alt="O">
    <area shape="RECT" coords="117,0,161,109"
    onmouseover="javascript:eek:nmouse('tx3','O')" onmouseout="onmouse('tx3','')"
    alt="O">
    <area shape="RECT" coords="162,0,204,109"
    onmouseover="javascript:eek:nmouse('tx4','G')" onmouseout="onmouse('tx4','')"
    alt="G">
    <area shape="RECT" coords="205,0,225,109"
    onmouseover="javascript:eek:nmouse('tx5','L')" onmouseout="onmouse('tx5','')"
    alt="L">
    <area shape="RECT" coords="226,0,275,109"
    onmouseover="javascript:eek:nmouse('tx6','E')" onmouseout="onmouse('tx6','')"
    alt="E">
    </map>
    <script type="text/javascript">
    var save = document.getElementById("img").src;
    function onmouse(parm,what) {
    var pict;
    if (what != "") {
    colo = "yellow";
    pict = "http://www.outdoordecorcentral.com/graphics/BA07L91";
    pict += what.toUpperCase() + ".jpg";
    } else {
    colo = "white";
    pict = save;
    }
    document.getElementById("img").src = pict;
    document.getElementById(parm).style.background = colo;
    }
    </script>
    </body>
    </html>
     
    McKirahan, Sep 20, 2004
    #4
  5. J. Makela

    Randy Webb Guest

    McKirahan wrote:

    <--snip-->

    >
    > "img" is the name assigned at the end of the following tag:
    >
    > <img src="http://www.denijsdesign.de/dd_images/i_allg/xtrans_x_320x320.gif"
    > border="0" width="320" height="320" alt="" name="img">


    Yes, but you try to access it using getElementByID, which is looking for
    an *ID*. The fact it works in IE only means IE is getting it wrong.

    > Here's a version that highlights text on mouseover.


    No, its a version that works in IE, and no other browser I tested it in.

    <--snip-->

    > <area shape="RECT" coords="0,0,68,109"
    > onmouseover="javascript:eek:nmouse('tx1','G')" onmouseout="onmouse('tx1','')"
    > alt="G">


    The javascript:, AFAIK, is not needed there.

    > document.getElementById("img").src = pict;


    Here, you are trying to access an image with the name="img", yet the img
    tag has no ID attribute, hence it fails in non-IE browsers. This is but
    one error code produced by Mozilla:

    Error: document.getElementById("img") has no properties
    Source File:
    file:///C:/Documents%20and%20Settings/Randy/My%20Documents/onmouse.htm
    Line: 50

    --
    Randy
    comp.lang.javascript FAQ - http://jibbering.com/faq
     
    Randy Webb, Sep 20, 2004
    #5
  6. J. Makela

    McKirahan Guest

    "Randy Webb" <> wrote in message
    news:...
    > McKirahan wrote:
    >
    > <--snip-->
    >
    > >
    > > "img" is the name assigned at the end of the following tag:
    > >
    > > <img

    src="http://www.denijsdesign.de/dd_images/i_allg/xtrans_x_320x320.gif"
    > > border="0" width="320" height="320" alt="" name="img">

    >
    > Yes, but you try to access it using getElementByID, which is looking for
    > an *ID*. The fact it works in IE only means IE is getting it wrong.
    >
    > > Here's a version that highlights text on mouseover.

    >
    > No, its a version that works in IE, and no other browser I tested it in.
    >
    > <--snip-->
    >
    > > <area shape="RECT" coords="0,0,68,109"
    > > onmouseover="javascript:eek:nmouse('tx1','G')"

    onmouseout="onmouse('tx1','')"
    > > alt="G">

    >
    > The javascript:, AFAIK, is not needed there.
    >
    > > document.getElementById("img").src = pict;

    >
    > Here, you are trying to access an image with the name="img", yet the img
    > tag has no ID attribute, hence it fails in non-IE browsers. This is but
    > one error code produced by Mozilla:
    >
    > Error: document.getElementById("img") has no properties
    > Source File:
    > file:///C:/Documents%20and%20Settings/Randy/My%20Documents/onmouse.htm
    > Line: 50
    >
    > --
    > Randy
    > comp.lang.javascript FAQ - http://jibbering.com/faq


    Try this though I only tested it under IE.

    <html>
    <head>
    <title>unchecks.htm</title>
    <script type="text/javascript">
    function checkonly(what) {
    var form = document.fruitform;
    for (var i=0; i<form.elements.length; i++) {
    if (form.elements.type == "checkbox") {
    if (what == 0) {
    if (form.elements.value != "0") {
    if (form.elements.name != what) {
    form.elements.checked = false;
    }
    }
    } else {
    if (form.elements.value == "0") {
    form.elements.checked = false;
    }
    }
    }
    }
    }
    </script>
    </head>
    <body>
    <form name="fruitform" action="..." method="post">
    <input type="checkbox" value="1" name="fruit" onclick="checkonly('1')">
    Apples
    <input type="checkbox" value="2" name="fruit" onclick="checkonly('2')">
    Oranges
    <input type="checkbox" value="3" name="fruit" onclick="checkonly('3')">
    Pears
    <input type="checkbox" value="0" name="fruit" onclick="checkonly('0')"> No
    Answer
    </form>
    </body>
    </html>
     
    McKirahan, Sep 21, 2004
    #6
  7. J. Makela

    McKirahan Guest

    [snip]

    > Try this though I only tested it under IE.
    >
    > <html>
    > <head>
    > <title>unchecks.htm</title>


    Please ignore my last response as it was for another post.
     
    McKirahan, Sep 21, 2004
    #7
  8. On Mon, 20 Sep 2004 20:00:19 GMT, McKirahan <> wrote:

    > "Michael Winter" <> wrote in message
    > news:eek:psem3ofcgx13kvk@atlantis...


    [snip]

    >> Mike
    >>
    >>
    >> Please trim quotes.
    >>
    >> --
    >> Michael Winter
    >> Replace ".invalid" with ".uk" to reply by e-mail.


    Don't include signatures when quoting someone else's post. A good
    newsreader will remove them for you.

    > "img" is the name assigned at the end of the following tag:
    >
    > <img
    > src="http://www.denijsdesign.de/dd_images/i_allg/xtrans_x_320x320.gif"
    > border="0" width="320" height="320" alt="" name="img">


    You missed my point entirely. You identify that element by name, yet you
    use the getElementById method. Surely, common sense tells you something is
    wrong with that.

    I've mentioned before that using getElementById should only be used when
    appropriate collections are not available. In this case, use the
    document.images collection. It will retrieve images identified by both id
    and name (ids checked first).

    It pays you to test everything in a decent browser, rather than IE. Once
    things are fine in Opera and Mozilla, then check with IE.

    [snip]

    Mike

    --
    Michael Winter
    Replace ".invalid" with ".uk" to reply by e-mail.
     
    Michael Winter, Sep 21, 2004
    #8
  9. J. Makela

    J. Makela Guest

    Wow, lots of good help here.. between this and some other stuff I found,
    I think I *might* be able to muddle my way through. Pray for me. :)

    Thanks very much!
    J
     
    J. Makela, Sep 21, 2004
    #9
  10. On Mon, 20 Sep 2004 17:58:27 GMT, J. Makela <> wrote:

    [snip]

    > Swapping out the actual image being moused over is relatively easy.


    Extremely easy. See:

    <URL:http://www.mlwinter.pwp.blueyonder.co.uk/image-swap/>

    > But, one of the things I need to figure out is how to change 1
    > image into 3 or 4 *different* images when OTHER parts of OTHER images
    > are moused over. It's very similar to a normal mouseover, except for the
    > fact that the image being moused over isn't the one changing. A
    > completely different picture at the bottom of the page needs to change.


    There's no problem here, but if the swapped-in image is important, make
    sure it can be accessed even if Javascript is disabled. The easiest way to
    assure this is to place the images within links.

    function replaceImage(fN, iN) {
    document.images[iN].src = fN;
    }

    <a href="first-large.jpg"
    onmouseover="replaceImage(this.href,'mainImg');">
    <img src="first.jpg" alt=""></a>

    <a href="second-large.jpg"
    onmouseover="replaceImage(this.href,'mainImg');">
    <img src="second.jpg" alt=""></a>

    <a href="third-large.jpg"
    onmouseover="replaceImage(this.href,'mainImg');">
    <img src="third.jpg" alt=""></a>

    <img name="mainImg" id="mainImg" src="first-large.jpg" alt="">

    [snip]

    > Second issue is an image mouseover that changes the color of *text* on
    > the page.


    Can you show the structure of this particular section of HTML? It might be
    usable as is, or you might need to restructure it.

    [snip]

    Mike

    --
    Michael Winter
    Replace ".invalid" with ".uk" to reply by e-mail.
     
    Michael Winter, Sep 21, 2004
    #10
  11. You are fortunate. I said, "Mouse-over" once and got taken of with VB6.0
    and eventually, I am swimming on events with VB.Net Whidbey with
    additional support thrown in in the form of DHTML.

    Have you heard of RollOvers?

    with regards,


    J.V.Ravichandran
    - http://www.geocities.com/
    jvravichandran
    - http://www.411asp.net/func/search?
    qry=Ravichandran+J.V.&cob=aspnetpro
    - http://www.southasianoutlook.com
    - http://www.MSDNAA.Net
    - http://www.csharphelp.com
    - http://www.poetry.com/Publications/
    display.asp?ID=P3966388&BN=999&PN=2
    - Or, just search on "J.V.Ravichandran"
    at http://www.Google.com

    *** Sent via Developersdex http://www.developersdex.com ***
    Don't just participate in USENET...get rewarded for it!
     
    Ravichandran J.V., Sep 21, 2004
    #11
  12. J. Makela

    J. Makela Guest


    > Can you show the structure of this particular section of HTML? It might
    > be usable as is, or you might need to restructure it.
    >
    > [snip]
    >
    > Mike


    Hi Mike.

    Just in case you still see this and are willing to help, I've made a
    (very) quick and (very) dirty example page kinda explaining what I need..

    http://www.faceman.com/stuff/text/

    I'll keep hunting, but any help is still appreciated. :)

    Thanks again,
    J
     
    J. Makela, Sep 22, 2004
    #12
  13. [CCd to OP]

    On Wed, 22 Sep 2004 21:28:47 GMT, J. Makela <> wrote:

    [snip]

    > Just in case you still see this and are willing to help, I've made a
    > (very) quick and (very) dirty example page kinda explaining what I need..
    >
    > http://www.faceman.com/stuff/text/


    [snip]

    Will this do, at least as a starting point?

    <URL:http://www.mlwinter.pwp.blueyonder.co.uk/clj/makela/mouseover.html>

    Notice that I haven't used your image filenames. My rollover script
    depends on a pattern existing in the filenames for it to identify images
    that it should interact with. Whilst it doesn't have to be <name>-on and
    <name>-off, it does need to be something similar.

    Hope that helps,
    Mike


    Sorry for the delay.

    --
    Michael Winter
    Replace ".invalid" with ".uk" to reply by e-mail.
     
    Michael Winter, Sep 27, 2004
    #13
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. =?Utf-8?B?U2NvdHQ=?=

    Breakpoint Mayhem....

    =?Utf-8?B?U2NvdHQ=?=, Aug 18, 2004, in forum: ASP .Net
    Replies:
    2
    Views:
    349
    Scott Tuttle
    Aug 19, 2004
  2. Stan Goodman

    Even older fart, even newer newbie

    Stan Goodman, Jul 3, 2003, in forum: Java
    Replies:
    11
    Views:
    704
    Stan Goodman
    Jul 4, 2003
  3. George Marsaglia

    Assigning unsigned long to unsigned long long

    George Marsaglia, Jul 8, 2003, in forum: C Programming
    Replies:
    1
    Views:
    691
    Eric Sosman
    Jul 8, 2003
  4. Daniel Rudy

    unsigned long long int to long double

    Daniel Rudy, Sep 19, 2005, in forum: C Programming
    Replies:
    5
    Views:
    1,205
    Peter Shaggy Haywood
    Sep 20, 2005
  5. Andries

    I know, I know, I don't know

    Andries, Apr 23, 2004, in forum: Perl Misc
    Replies:
    3
    Views:
    242
    Gregory Toomey
    Apr 23, 2004
Loading...

Share This Page