SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Oct 2011
    Location
    Budapest, Hungary
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Help needed: OnMouseClick event

    I would like to create a poll/pick page with onMouseClick event on it.
    The problem is that I don't know how can I reach my desired effects.
    I have 4 pics on the page: TEAM1, TEAM2, DRAW, QUESTION.
    If a visitor would like to poll for the result of the sport event have to click on one of the picture.
    If click on the first - the 4th picture (a question mark) will change to the first team's logo;
    If click on the second - the 4th picture will change to the second team's logo;
    If click on the third - the 4th picture will change to the draw logo.


    A part of CSS section

    Code:
    <STYLE TYPE="text/css" MEDIA=screen>
    .oddrow {
        background-color: #CCCCCC;
        text-align: center;
    }
    .evenrow {
        background-color: #888888;
        text-align: center;
    }
    .logos {
        background-image: url(data:image/png;base64,iVBO.........Rw0K);
        background-position: -50px 0;
        background-repeat: no-repeat;
        height: 50px;
        width: 50px;
    }
    .logo-quest {
        background-image: url(data:image/png;base64,iVBOR........w0KG);
        background-position: 0 0;
        height: 50px;
        width: 50px;
    }
    .logo-equal {
        background-image: url(data:image/png;base64,iVBO........Rw0K);
        background-position: 0 0;
        height: 50px;
        width: 50px;
    }
    .logo-team1 {
        background-position: 0 0;
    }
    .logo-team2 {
        background-position: 0 -50px;
    }
    ...
    </STYLE>
    A part of BODY section

    Code:
    <tr class="evenrow">
    <td>TEAM1'S NAME<br>TEAM2'S NAME</td>
    <td><div class="logo-team1 logos">&nbsp;</div></td>
    <td><div class="logo-team2 logos">&nbsp;</div></td>
    <td><div class="logo-equal logos">&nbsp;</div></td>
    <td><div class="logo-quest logos">&nbsp;</div></td>
    </tr>
    I can make a simple version of onMouse* event, but how can I use it if I want to change the 4th picture?
    And is it possible to use encoded pictures from CSS? What is the good syntaxes for that?

    Thank you in advance and sorry for my english!
    Jack

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,678
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by JackJeruk View Post
    I can make a simple version of onMouse* event, but how can I use it if I want to change the 4th picture?
    What you seem to require is for the class name of the last div to be replaced by that from the one that was clicked.

    Quote Originally Posted by JackJeruk View Post
    And is it possible to use encoded pictures from CSS? What is the good syntaxes for that?
    The CSS forum would know a lot more about such CSS things.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Member
    Join Date
    Oct 2011
    Location
    Budapest, Hungary
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question

    Ehh, I will give up. :( I try many ways w/o any success.
    Paul Wilkins, thank you for your help but this problem is too high for me at this time, I think. :(

    And there is not one row just, there is at least 16... It is the NFL. :) In Hungary are lot of fan of this great sport...
    Here is the source w/ 2 rows - a friend said that is not possible by that way what I want.


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
    <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <title>NFL - 4. hét</title>
    <meta name="keywords" content="NFL The-West" />
    <meta name="description" content="Tippösszesítő az NFL 4. heti fordulójához" />
    <meta name="author" content="Jack" />
    <meta name="robots" content="none" />

    <style type="text/css" media="screen">
    .oddrow {
    background-color: #CCCCCC;
    text-align: center;
    }
    .evenrow {
    background-color: #888888;
    text-align: center;
    }
    .logos {
    background-image: url(data:image/png;base64,iVBOR....YII=);
    background-position: -50px 0;
    background-repeat: no-repeat;
    height: 50px;
    width: 50px;
    }
    .logo-qes {
    background-image: url(data:image/png;base64,iVBOR....gg==);
    background-position: 0 0;
    height: 50px;
    width: 50px;
    }
    .logo-equ {
    background-image: url(data:image/png;base64,iVBOR....gg==);
    background-position: 0 0;
    height: 50px;
    width: 50px;
    }
    .logo-buf {
    background-position: 0 -250px;
    }
    .logo-car {
    background-position: 0 -300px;
    }
    .logo-chi {
    background-position: 0 -350px;
    }
    .logo-cin {
    background-position: 0 -400px;
    }
    </style>
    </head>

    <body>

    <table cellspacing="1" cellpadding="3" border="0" class="tablehead">
    <tbody>

    <tr>
    <td align="right" colspan="11">NFL - Week 4</td>
    </tr>

    <tr class="evenrow">
    <td>CAROLINA PANTHERS<br />CHICAGO BEARS</td>
    <td><div class="logo-car logos">&nbsp;</div></td>
    <td><div class="logo-chi logos">&nbsp;</div></td>
    <td><div class="logo-equ logos">&nbsp;</div></td>
    <td><div class="logo-qes logos">&nbsp;</div></td>
    </tr>

    <tr class="oddrow">
    <td>BUFFALO BILLS<br />CINCINNATI BENGALS</td>
    <td><div class="logo-buf logos">&nbsp;</div></td>
    <td><div class="logo-cin logos">&nbsp;</div></td>
    <td><div class="logo-equ logos">&nbsp;</div></td>
    <td><div class="logo-qes logos">&nbsp;</div></td>
    </tr>

    <tr>
    <td align="left" colspan="11">... and 14 rows more ...</td>
    </tr>

    </tbody>
    </table>

    <p>
    <a href="http://validator.w3.org/check?uri=referer">
    <img src="http://www.w3.org/Icons/valid-xhtml10" alt="Érvényes XHTML 1.0 Strict!" height="31" width="88" />
    </a>
    <a href="http://jigsaw.w3.org/css-validator/check/referer">
    <img style="border:0;width:88px;height:31px" src="http://jigsaw.w3.org/css-validator/images/vcss" alt="Érvényes CSS!" />
    </a>
    </p>

    </body>
    </html>
    The base64 encode part was cutted.


Tags for this Thread

Bookmarks

Posting Permissions

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