Solved

DHTML Script needed - image rollover, transparency, scroll/fade effects

Posted on 2003-11-16
4
2,320 Views
Last Modified: 2012-08-13
Anyone know of any examples of this out there, possibly some scripts that already exist that will achieve the following things...?

I have an image on the page.  When the mouse rolls over this image, I want a box to scroll down underneath the image (or fade in underneath the image).  This box needs to have a background color with some transparency.  In the box I will have an image that includes only some text with a transparent background (it has to be an image to use a specific font).

Something like this:
___________________
|                               |
|          IMAGE 1         |
|                               |
---------------------------

When you roll over IMAGE 1, you get this:

___________________
|                               |
|          IMAGE 1         |
|                               |
---------------------------
___________________
|                               |
|          LAYER            |
|                               |
|                               |
|                               |
|                               |
|                               |
---------------------------

Where LAYER scrolls down from IMAGE 1 (or simply fades in).  LAYER has the background color with something like 75% transparency.  LAYER's contents include a gif that has text and a transparent background.

thanks for the help.










0
Comment
Question by:econy1
  • 2
4 Comments
 
LVL 10

Expert Comment

by:NetGroove
ID: 9759949
Is this what you ask for:

<html>
<head>
<script>
function show(theImg, divId){
  theDiv = document.getElementById(divId);
  theDiv.style.display='block';
  theDiv.style.top = theImg.offsetTop+theImg.height;
  theDiv.style.left = theImg.offsetLeft;
}
function hide(divId){
  document.getElementById(divId).style.display='none';
}
</script>
</head>
<body>
<div id="box" style="position:absolute; display:none; filter:alpha(opacity=75);-moz-opacity: 75;" >
<img src="image2.gif" >
</div>
<br><br><br>
<center>
<img src="image1.gif" onMouseOver="show(this, 'box')" onMouseOut="hide('box')">
</center>
</body>
</html>


0
 

Author Comment

by:econy1
ID: 9760368
This will not work.  This element is going to be in the middle of a page with other images and design all around it.  I'm fairly certain that I need to use layers for this.  For example, I put your suggestion in a table and as you will see, the result did not work:

<html>
<head>
<script>
function show(theImg, divId){
  theDiv = document.getElementById(divId);
  theDiv.style.display='block';
  theDiv.style.top = theImg.offsetTop+theImg.height;
  theDiv.style.left = theImg.offsetLeft;
}
function hide(divId){
  document.getElementById(divId).style.display='none';
}
</script>
</head>
<body>
<div id="box" style="position:absolute; display:none; filter:alpha(opacity=75);-moz-opacity: 75;" >
<img src="image2.gif" >
</div>
<br><br><br>
<center>
<table border="1">
<tr>
      <td><img src="image1.gif" width="100" height="50" onMouseOver="show(this, 'box')" onMouseOut="hide('box')"></td>
</tr>
<tr>
      <td>Here is some text.</td>
</tr>
</table>
</center>
</body>
</html>



I probably need something similar to how a dhtml dropdown navigation menu works (something like what is used here --  http://support.gateway.com).  Only I will only have one element, the dropdown needs to slide down from the image or fade down, and the dropdown needs to contain an image over its semi-transparent background.

0
 
LVL 12

Accepted Solution

by:
Dean OBrien earned 200 total points
ID: 9763822
econy, try this out, obviously you would call the function from your mouse over instead of a click!

<html>
<head>
<script language="javascript">
<!--//
var d1,d2,steps,wAmount,hAmount,lAmount,tAmount,oAmount

var slidein = "1"
var divOpacity = 100
var newTop = null
var currTop = null
var direction = null

function slide() {
     document.getElementById('copy').style.visibility='visible';
     currTop = parseInt(document.getElementById('copy').style.top)

     if (document.all) {
          newTop = document.body.scrollTop
     } else {
          newTop = window.pageYOffset
     }
     
      if (parseInt(document.getElementById('copy').style.top) == newTop) {
          direction = '+';
      }else{
           direction ='-';
       }
     slideNow()
}
function slideNow() {

     if (direction == "-") //sliding up
     {
          if (parseInt(document.getElementById('copy').style.top) != newTop) {
                    document.getElementById('copy').style.top = eval ("parseInt(document.getElementById('copy').style.top) " + direction + " 1")
                    setTimeout("slideNow()", 1)
     }          
       }else{ //sliding down
          if (parseInt(document.getElementById('copy').style.top) != 280) {
               document.getElementById('copy').style.top = eval ("parseInt(document.getElementById('copy').style.top) " + direction + " 1")
                    setTimeout("slideNow()", 1)
          }
        }
}

function setOpacity(objectId,objectOpacity) {
     if (document.all){
          document.all(objectId).filters.alpha.opacity = objectOpacity
     } else if (!document.all && document.getElementById) {          
          document.getElementById(objectId).style.MozOpacity = objectOpacity/100
     }
}

function fadeDiv(oAmount) {
inc=oAmount
     divOpacity = divOpacity - oAmount
     if (divOpacity > 0 && divOpacity < 100) {
          setOpacity("copy",divOpacity)
          setTimeout("fadeDiv(inc)",1)
     }
}

function test(){

     if(slidein == "1")
     {
       slide();
       fadeDiv(0.3);
       slidein = "0";
     }
     else
     {
       slide();
       fadeDiv(-0.3);
       slidein = "1";  
     }
}


//-->
</script>
    </head>
<body>
<a href="javascript:test()"Click this!</a>
<br>

<div id="copy" style="position:absolute; top:280; left:362; color:red;filter:alpha(opacity=100); font-size:30px; z-index:4">
<table style="color:red;filter:alpha(opacity=100); font-size:30px;">
<tr><td>Text 1</td></tr>
<tr><td>Text 2</td></tr>
<tr><td>Text 3</td></tr>
<tr><td><img src="mail.jpg" width="150px" height ="150px"></td></tr>
</table>
</div>
</body>
</html>

Easynow
0
 
LVL 12

Expert Comment

by:Dean OBrien
ID: 9763841
Sorry, theres a '>' missing from the anchor tag.

Change to this.

<a href="javascript:test()">Click this!</a>

Easynow
0

Featured Post

What Is Threat Intelligence?

Threat intelligence is often discussed, but rarely understood. Starting with a precise definition, along with clear business goals, is essential.

Join & Write a Comment

When you need to keep track of a simple list of numbers or strings, the Array object is your most direct tool.  As we saw in my earlier EE Article (http://www.experts-exchange.com/A_3488.html), typical array handling might look like this: (CODE) B…
The task A number given should be formatted for easy reading by separating digits into triads. Format must be made inline via JavaScript, i.e., frameworks / functions are not welcome. So let’s take a number like this “12345678.91¿ and format i…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

760 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

19 Experts available now in Live!

Get 1:1 Help Now