hover capaiblity without a page refresh

Posted on 2005-04-08
Last Modified: 2008-03-17
I am looking for hover capability without a page refresh, is that possible? What I have is a select box with ahref links in it, when a link is clicked the site moves to a product description page. I want to add hover capability to these links so that when the mouse is over the product name, a picture box appears that is in the middle of the page but not over the select box which is off to the right.

I have seen this hover capability using flash, but I don’t want to use flash since not everyone has it
Question by:finnstone
    LVL 3

    Expert Comment

    Your solution, will be in javascript not HTML. If you're not using flash just becuase of compatibility concerns, don't worry.   I think flash is a better option than client scripting becuase there are FAR LESS compatibility issues with Flash than there are with javascript for different browsers.  Flash is available on 98% of browsers (I read that somewhere).
    LVL 32

    Accepted Solution

    This is how it could be done with javascript:

    The images are stored in the myImages array. You call the function showPicture() which changes the image at the middle of the page.

    var myImages = new Array();
    myImages[0] = new Image();
    myImages[0].src = 'image1.gif';
    myImages[1] = new Image();
    myImages[1].src = 'image2.gif';
    function showPicture(imageIndex){

    function clearPicture(){
    <a href="myPage.html" onmouseover="showPicture(0)" onmouseout="clearPicture()">Link 1</a><br>
    <a href="myPage.html" onmouseover="showPicture(1)" onmouseout="clearPicture()">Link 2</a><br>
    <div id="imageBox" style="float:left;width:500px;height:500px;border:1px dotted #999999">
    <img id="theImage">
    <div id="otherContent" style="padding-left:10px;float:left">
    <select name="mySelect" style="width:200px"></select>
    LVL 3

    Expert Comment


    I think he/she want this capability in a Dropdown list.  I don't think javascript can detect hover for Select object.

    Author Comment

    yes i want the capability to be avaialbe in this drop down which is a select box...i do have an onfocus event, could i used that?

    this is a cfm page, not html

    Author Comment

    this is from cfm documentation

    In addition to the listed attributes, you can use the following HTML attributes in the cfform tag without using the passThrough attribute. The tag does not use these attributes, but includes them in the HTML of the form tag that it generates and returns to the browser:

    To ensure that a selected list box item persists across postbacks, use the cfform preserveData attribute with a list generated from a query. (This strategy works only with data that is populated from a query.)

    If the cfform preserveData attribute is true and the form posts back to the same page, and if the control is populated by a query, the posted selection(s) for the cfselect control are used instead of the Selected attribute. For controls that are populated with regular HTML option tags, the developer must dynamically add the Selected attribute to the appropriate option tag(s).

    For this tag to work properly. the browser must be JavaScript-enabled.

    To add other HTML <input> tag attributes and values to this tag, use the passThrough attribute. They are passed through to the select tag that ColdFusion generates for the cfselect control when creating a form. The supported HTML attributes are: CLASS, ID, MAXLENGTH, MESSAGE, ONBLUR, ONCHANGE, ONCLICK, ONDBLCLICK, ONFOCUS, SIZE, STYLE, and TABINDEX.
    LVL 23

    Assisted Solution

    << Flash is available on 98% of browsers >>

    Maybe, but a lot of people block flash because of annoying flashing advertisements.
    For menus and popup lists, you should use DHTML instead of flash.
    One can hardly use most websites anymore without JS enabled in the browser.
    I know some people claim that a lot of users turn JS off, but  find it hard to imagine how anyone can expect to use the internet effectively today without JS enabled in the browser.

    The fundamentals are simple -- just declare a <DIV> where you want it on the page.
    Use JS to write the image to that <DIV> onmouseover(), and use JS to remove it, onmouseout().

    Baltalf's solution, above, is the right idea.

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    How to improve team productivity

    Quip adds documents, spreadsheets, and tasklists to your Slack experience
    - Elevate ideas to Quip docs
    - Share Quip docs in Slack
    - Get notified of changes to your docs
    - Available on iOS/Android/Desktop/Web
    - Online/Offline

    "I want to put my photos online, but I don't want them stolen.  What settings should I use?" When You Put Photos Online First and foremost, any digital file published on the WWW can be copied, stored, modified, retransmitted, etc.  Remember Naps…
    Deprecated and Headed for the Dustbin By now, you have probably heard that some PHP features, while convenient, can also cause PHP security problems.  This article discusses one of those, called register_globals.  It is a thing you do not want.  …
    In this tutorial viewers will learn how to define a gradient in CSS. Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Gradient. Define the background as "linear-gradient(to right, #ee3668, black)". Ensure you …
    In this tutorial viewers will learn how add a full-size background image to a webpage using CSS3. Create a new HTML document with an internal stylesheet.: In CSS, define the html element to have a background image. Use a high resolution image.: In t…

    779 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    14 Experts available now in Live!

    Get 1:1 Help Now