• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 278
  • Last Modified:

hover capaiblity without a page refresh

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
0
finnstone
Asked:
finnstone
2 Solutions
 
farkitCommented:
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).
0
 
BatalfCommented:
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.

<html>
<head>
<script>
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){
      document.getElementById('theImage').src=myImages[imageIndex].src;
      document.getElementById('theImage').style.visibility='visible';
      
}

function clearPicture(){
      document.getElementById('theImage').style.visibility='hidden';
      
}
</script>
<body>
<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>
<div id="otherContent" style="padding-left:10px;float:left">
<select name="mySelect" style="width:200px"></select>
</div>
</body>
</html>
0
 
farkitCommented:
Batalf,

I think he/she want this capability in a Dropdown list.  I don't think javascript can detect hover for Select object.
0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
finnstoneAuthor Commented:
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
0
 
finnstoneAuthor Commented:
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:

class
id
onBlur
onChange
onClick
onDblclick
onFocus
style
tabIndex
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.
0
 
sciwriterCommented:
<< 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.
0

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now