This discussion is archived
11 Replies Latest reply: May 8, 2011 1:52 AM by fac586 RSS

mouse rollover - chainging image

qwe12654 Newbie
Currently Being Moderated
Hi,

I have an ICON on the page... Is there an option to highlight it (or change the color/size) on mouse rollover...

Thanks
  • 1. Re: mouse rollover - chainging image
    NicoMartens Journeyer
    Currently Being Moderated
    Create something in jquery to do this. More info: http://docs.jquery.com/UI/Effects/Highlight

    An example would be on page load:

    $("ITEM_ID").mouseover(function () {
    $(this).effect("highlight", {}, 3000);
    });

    Be warned that you will always need an ID to do this with this function.

    In a report you need to name your items and than do something like

    $("REPORT_STATIC_ID").find("column_name").mouseover(function () {
    $(this).effect("highlight", {}, 3000);
    });

    You can enter any jquery you like inside the function.

    Hope this helps

    Br,

    Nico

    Edited by: NicoMartens_InterAccessBE on 15-apr-2011 8:30
  • 2. Re: mouse rollover - chainging image
    vee Guru
    Currently Being Moderated
    The "simplest"(maybe ??) way to achieve such a function is using just pure CSS

    You change the icon to a dummy link tag ( <a> ) and specify the image using the background-image property.
    Define background-images one for the normal link and another for the :hover pseudo class
    <a href="" class="hover_image"></a>
    and styling(page header)
    <style>
     a.hover_image {
      background: url("normal image URL") no-repeat scroll 0 0 transparent;
     }
     a.hover_image:hover {
      background: url("mouse over image URL") no-repeat scroll 0 0 transparent;
     }
    </style>
  • 3. Re: mouse rollover - chainging image
    qwe12654 Newbie
    Currently Being Moderated
    Vee, Here is what I've done

    Put following code in the "Header Text" section of the "page attributes"

    <style>
    a.hover_image {
    background: url("normal image URL") no-repeat scroll 0 0 transparent;
    }
    a.hover_image:hover {
    background: url("mouse over image URL") no-repeat scroll 0 0 transparent;
    }
    </style>

    and put following code in the "Source section" of the "Region Definition"

    a href="#WORKSPACE_IMAGES#UWM_MAIN_ICON14.png" class="hover_image"></a>


    My Icon disappeared and is not showing up when I run the application...

    thanks

    Edited by: qwe12654 on Apr 15, 2011 10:42 AM

    Edited by: qwe12654 on Apr 15, 2011 10:42 AM
  • 4. Re: mouse rollover - chainging image
    vee Guru
    Currently Being Moderated
    "normal image URL" and "mouse over image URL" are the actual images files(including their paths)

    Please save the following into a new file and save it as an HTMl file and open it in your browser
    &lt;html&gt;
    &lt;style&gt;
     a.hover_image{
      background: url(&quot;image1.png&quot;) no-repeat scroll 0 0 transparent;
      text-decoration:none;
      display:inline-block;
      width:20px;
     }
     a.hover_image:hover{
      background: url(&quot;image2.ng&quot;) no-repeat scroll 0 0 transparent;
     }
    &lt;/style&gt;
    
    &lt;body&gt;
    &lt;a href=&quot;#&quot; class=&quot;hover_image&quot;&gt;&amp;nbsp;&lt;/a&gt;
    &lt;/body&gt;
    &lt;/html&gt;
    Add image1.png and image2.png in the same directory as that of the html file
    See how the css works for that simple html page and modify it for your apex page.
  • 5. Re: mouse rollover - chainging image
    qwe12654 Newbie
    Currently Being Moderated
    Hi vee,

    I've followed your lead and seems like there is a slight hiccup...

    I have couple of different images on the page with the links but the images are somehow repeated (same image repeating itself)...

    created a sample on APEX.ORACLE.COM for your review and comments


    Thanks again for your assistance... I am sure I am 99.9% there

    Edited by: qwe12654 on 12-May-2011 9:44 AM
  • 6. Re: mouse rollover - chainging image
    fac586 Guru
    Currently Being Moderated
    I have couple of different images on the page with the links but the images are somehow repeated (same image repeating itself)...
    What browser/version are you using? Don't see any issues like this on Safari 5, Firefox 4, IE7 or IE8.

    Explain "somehow repeated (same image repeating itself)", or post a screenshot showing this.
    I am sure I am 99.9% there
    Alas no. What are you using as an HTML reference? Mark-up like
    <B><font face="Arial" size="+3" color="#244764">Title 1</FONT>
    is <em><strong>15 YEARS out of date</strong></em>.

    Including <tt>html</tt>, <tt>body</tt>, and <tt>style</tt> elements out of place in an HTML region is also incorrect. (There is <strong>one</strong> <tt>html</tt> element on a page and there is <strong>one</strong> <tt>body</tt> element on a page. <tt>style</tt> elements must only be used inside the page <tt>head</tt> element&mdash;in APEX this means through page templates or page HTML Headers. I've created a cleaned-up copy of the page on page 3 showing this.)

    PLEASE: Do yourself a favour. For the present, forget about rollovers; forget about dynamic actions; forget about "cool APEX demo samples"; most especially, forget about jQuery. Concentrate on getting a basic understanding of (X)HTML, CSS and JavaScript. These are the basic foundations on which those other things are built. Spend some time on some tutorials: start with HTML, XHTML, and CSS, then Javascript and the HTML DOM, until you know how pages are structured, presentation is applied through style sheets, and behaviour is added using events and scripts.
  • 7. Re: mouse rollover - chainging image
    qwe12654 Newbie
    Currently Being Moderated
    fac586,

    May I know which of the icons you can see... I am getting only green icon with a paper clip and a man's shadow on it... I've tried through chrome and IE but getting the same... Plus, I've tried this logic on our intranet instance as well as on APEX.ORACLE.COM...

    once I'll be done with this project will definitely look into tutorials to keep up-to date...

    Thanks
  • 8. Re: mouse rollover - chainging image
    qwe12654 Newbie
    Currently Being Moderated
    my version of chrome is 11 and IE is 8
  • 9. Re: mouse rollover - chainging image
    fac586 Guru
    Currently Being Moderated
    May I know which of the icons you can see... I am getting only green icon with a paper clip and a man's shadow on it
    That's initially visible. On rollover it changes to a purple inverse version of the same image.
  • 10. Re: mouse rollover - chainging image
    qwe12654 Newbie
    Currently Being Moderated
    I am using 4 images in total... when you log into page 2 there should be 2 images side by side, with the same initial image, when you roll over mouse they change image (inverted) and the roll over image is also the same for both the items...

    if you look at the code they are suppose to be 2 totally different images initially (referring to 2 other images on mouse rollover)...

    Thanks
  • 11. Re: mouse rollover - chainging image
    fac586 Guru
    Currently Being Moderated
    they are suppose to be 2 totally different images initially (referring to 2 other images on mouse rollover)...
    As now on page 3?

    This uses the following source HTML in an HTML region:
    <ul>
      <li id="darius">
        <a href="f?p=&APP_ID.:11:&APP_SESSION." title="Darius">Darius</a>
      </li>
      <li id="xerxes">
        <a href="f?p=&APP_ID.:11:&APP_SESSION." title="Xerxes">Xerxes</a>
      </li>
    </ul>
    And this style sheet in the page HTML Header:
    <style type="text/css">
    ul {
      margin:-left: 0;
      padding-left: 0;
      list-style: none;
    }
    ul li {
      display: inline-block;
      margin-right: 8px;
     }
    ul a:link,
    ul a:visited {
      display: inline-block;
      height: 128px;
      width: 128px;
      background-repeat: no-repeat;
      text-decoration: none;
      text-indent: -5000px;
    }
    ul #darius a:link {
      background-image: url(#WORKSPACE_IMAGES#UWM_MAIN_ICON8.png);
    }
    ul #darius a:hover {
      background-image: url(#WORKSPACE_IMAGES#UWM_MAIN_ICON8_INV.PNG);
    }
    ul #xerxes a:link {
      background-image: url(#WORKSPACE_IMAGES#UWM_MAIN_ICON14.png);
    }
    ul #xerxes a:hover {
      background-image: url(#WORKSPACE_IMAGES#UWM_MAIN_ICON14_INV.PNG);
    }
    </style>
    This is one form of a class of CSS Image Replacement techniques.

    Notice the excruciating performance in IE compared with Safari/Chrome. This can be fixed using the CSS Sprite technique (as used in APEX 4.0 built-in themes).

    If such links are to be used as navigation elements in an APEX application, do it using a list with a custom template and CSS.

Legend

  • Correct Answers - 10 points
  • Helpful Answers - 5 points