www.webdeveloper.com
Results 1 to 5 of 5

Thread: Mouseover function use

  1. #1
    Join Date
    Jan 2003
    Posts
    11

    Mouseover function use

    I am using the mouseover function to supersize thumbnail photos in a separate table with two rows of one cell each. The attached code works correctly to change the photo in the top row of the separate table.

    I now wish to enhance the code to also change an associated text caption in the second row to provide a correct caption for each new photo. This code is repeted in each thumbnail row/cell of the thumbnail table.

    The supersize table top row is named "big" and the bottom row is named "txt".

    Any thoughts?

    <a href=#
    ONMOUSEOVER="big.src='http://www.geocities.com/ccbebs/pics3667r/Restorationpics/FrontSuspensionAfter.jpg'">
    <IMG WIDTH=72 HEIGHT=64
    SRC="http://www.geocities.com/ccbebs/Images/72x64smalljpgs/FrontSuspensionAfterSMALL.jpg">

  2. #2
    Join Date
    Dec 2002
    Location
    Switzerland
    Posts
    428
    Please post your whole code with the tables etc.

  3. #3
    Join Date
    Jan 2003
    Posts
    11

    Mouseover function

    code is too long so I edited out unrelated code. Url to view all in action is: www.geocities.com/ccbebs/TablemakerTesting.htm

    <TABLE WIDTH="20%" BGCOLOR="#FFFFFF" ALIGN="left" CELLSPACING="1" CELLPADDING="1" BORDER="1">
    <caption valign="top" align="center">Mouse Over to Supersize</caption>
    <TR><th>
    <a href=# ONMOUSEOVER="big.src='URL FOR SUPERSIZED PHOTO HERE'">
    <IMG WIDTH=72 HEIGHT=64
    SRC="URL FOR THUMBNAIL HERE">
    </TH>
    <th>
    </TR>
    </TABLE>

    <TABLE WIDTH="520" TABLE HEIGHT=310 BGCOLOR="#FFFFFF" ALIGN="right" BORDER="3">
    <caption valign="top" align="center">Supersized Picture</caption>

    *cell for photo*

    <TR><TH>
    <IMG WIDTH=520 HEIGHT=310 NAME="big"
    SRC="http://www.geocities.com/ccbebs/pics3667r/Restorationpics/ShinyStuffRemoved.jpg">
    </TH></TR>

    * cell for caption *

    <TR><TD ALIGN=MIDDLE Font size="1"><span style="font-size:13"><font face=Verdana, Arial>
    Still need to put appropriate caption here???</FONT><BR>
    </TD></TR>

    </table>
    </body>
    </html>

  4. #4
    Join Date
    Dec 2002
    Location
    Switzerland
    Posts
    428
    Hope that's what you want:

    <script language=javascript>
    function changeText(NewTxt){
    obj = document.getElementById("changetext");
    obj.innerHTML = NewTxt;
    }
    </script>
    <style type="text/css">
    <!--
    .changetext{
    font-family:arial,verdana,helvetica;
    font-size:10pt;
    color:#00003F;
    }
    -->
    </style>
    <TABLE WIDTH="20%" BGCOLOR="#FFFFFF" ALIGN="left" CELLSPACING="1" CELLPADDING="1" BORDER="1">
    <caption valign="top" align="center">Mouse Over to Supersize</caption>
    <TR><th>
    <a href=# ONMOUSEOVER="big.src='URL FOR SUPERSIZED PHOTO HERE';changeText('That is the new text for this picture')">
    <IMG WIDTH=72 HEIGHT=64 SRC="URL FOR THUMBNAIL HERE">
    </TH>
    <th>
    </TR>
    </TABLE>

    <TABLE WIDTH="520" TABLE HEIGHT=310 BGCOLOR="#FFFFFF" ALIGN="right" BORDER="3">
    <caption valign="top" align="center">Supersized Picture</caption>

    *cell for photo*

    <TR><TH>
    <IMG WIDTH=520 HEIGHT=310 NAME="big" SRC="http://www.geocities.com/ccbebs/pics3667r/Restorationpics/ShinyStuffRemoved.jpg">
    </TH></TR>

    * cell for caption *

    <TR><TD ALIGN=MIDDLE Font size="1"><div id="changetext" class="changetext">
    Still need to put appropriate caption here???</div><BR>
    </TD>
    </TR>
    </table>

  5. #5
    Join Date
    Jan 2003
    Posts
    11

    Smile Mouseover Function

    SWON you are da Man!

    The code you suggested worked correctly the first time. Somewhat unusual in this world. Thanks!

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles