|
JavaScript - On Mouseover Show Transparent Div Over Hovered Div
I am creating a page on which I have several div's. They contain an image as background.
When I do a mouseover on a div, I want a div (with an image semitransparant), to be placed ontop of it's hovered div. When mouseout the semitransparant div should be hidden. Now I have the following code, it does work, but sometimes on mouseout the semitransparant div isn't hidden (when the mouse moves to quick). Is there a solution for it? PHP Code: echo '<div id="block-'.$BlockNums.'" class="blok '.$BlockStyle.'" onmouseover="document.getElementById(\'message\').style.display=\'block\';" ><img src="images/'.$BlockImg.'.png" width="181"/></div>'; echo '<a href="'.$BlockLink.'" style="display:block;cursor:pointer;"><div id="message" class="disMessage" style="display:none;" onmouseout="document.getElementById(\'message\').style.display=\'none\';"><p>'.$BlockMouse.'</p></div></a>'; And the css: Code: .disMessage
{
width: 163px;
height: 168px;
z-index: 1000;
position: absolute;
padding: 10px 10px 10px 10px;
text-align: center;
background-image: url("../images/hoverTrans.png");
}
.blok
{
width: 181px;
height: 186px;
/*border: 1px solid #FE7701;*/
background-image: url("../images/blok.png");
padding: 1px 9px 9px 1px;
}
Thanks Similar TutorialsI am trying to make it so when I mouseover on one div another div appears. And when I mouse out, the div disappears again. Here's what I have, it's not working. Both divs are always showing. Code: <script>
function mover(){
document.getElementById("visiblediv").style.display="block"
}
function mout() {
document.getElementById("visiblediv").style.display="none"
}
</script>
<div id = "div1" onmouseover="mover()" onmouseout="mout()">
Show the div
</div>
<div id = "visiblediv" style="visibility:visible;border:1px dotted black">
This div is visible
</div>
Any way I can make this work any better? Am I supposed to have something in my main.css file? I have a concatenated list of member names, with corresponding profile pics. I am trying to implement something similar to Facebook, where when you mouseover the picture or member name, another div appears, such as an "x" or "delete link" which lets you click to delete that member. I tried to implement the a show/hide with the following, but this won't work with me since my list is concatenated, and since you can only have one id per div- this method won't cut it. So, how can I make this happen? Non-working Code: Code: HTML
<div >
<div id="showhide">
Line 1
</div>
<div id="visiblediv" style="display: none;">
Line 2
</div>
</div>
<div >
<div id="showhide">
Line 3
</div>
<div id="visiblediv" style="display: none;">
Line 4
</div>
</div>
<div >
<div id="showhide">
Line 5
</div>
<div id="visiblediv" style="display: none;">
Line 6
</div>
</div>
Javascript:
<script>
function mover(){
document.getElementById("visiblediv").style.display="block"
}
function mout() {
document.getElementById("visiblediv").style.display="none"
}
document.getElementById('showhide').onmouseover=mover;
document.getElementById('showhide').onmouseout=mout;
</script>
CSS:
#visiblediv {
visibility:visible;
border:1px dotted black;
}
Hi I am trying to implement a hide/show div, such that when you mouse over a div, another div pop's up below it. Here's what I have so far, but for some reason, only the first div set is working. That is when I mouse over div 1, div 2 shows up. So why isnt it working for divs 3,4 and 5,6? Here's my code: Code:
HTML
<div >
<div id="showhide">
Line 1
</div>
<div id="visiblediv" style="display: none;">
Line 2
</div>
</div>
<div >
<div id="showhide">
Line 3
</div>
<div id="visiblediv" style="display: none;">
Line 4
</div>
</div>
<div >
<div id="showhide">
Line 5
</div>
<div id="visiblediv" style="display: none;">
Line 6
</div>
</div>
Javascript:
<script>
function mover(){
document.getElementById("visiblediv").style.display="block"
}
function mout() {
document.getElementById("visiblediv").style.display="none"
}
document.getElementById('showhide').onmouseover=mover;
document.getElementById('showhide').onmouseout=mout;
</script>
CSS:
#visiblediv {
visibility:visible;
border:1px dotted black;
}
Any ideas, as to why it's not working? I have an iFrame on which I wish to display scrollbars ONLY when the mouse is over the iFrame AND the source of the iFrame is larger than the iFrame can display I am using the following code for the iFrame but believe that I need to add some script to make it work: Code: <iframe src="http://www.mhgoebel.com" frameborder="0" id="frame" width="320" height="356" scrolling="no">
onmouseover="setScrolling('auto')" onmouseout="setScrolling('no')"
</iframe>
Hello I was looking for a javascript code to show an image in full size on moueover, I use this script on the site Code: function ShowPicture(id,Source) {
if (Source=="1"){
if (document.layers) document.layers[''+id+''].visibility = "show"
else if (document.all) document.all[''+id+''].style.visibility = "visible"
else if (document.getElementById) document.getElementById(''+id+'').style.visibility = "visible"
}
else
if (Source=="0"){
if (document.layers) document.layers[''+id+''].visibility = "hide"
else if (document.all) document.all[''+id+''].style.visibility = "hidden"
else if (document.getElementById) document.getElementById(''+id+'').style.visibility = "hidden"
}
}
CSS code i use: Code: <style type="text/css">
#Style {
position:absolute;
visibility:hidden;
border:solid 1px #CCC;
padding:5px;
}
</style>
On the site to to body I put this html code: Code: <a href="#" onMouseOver="ShowPicture('Style',1)" onMouseOut="ShowPicture('Style',0)">Click Here To Show Image</a>
<div id="Style"><img src="/sites/default/files/peroulades.jpg"></div>
When Im hovering over the link image is shown full size, Problem: if you take a look: http://www.online-dovolenka.sk/dovolenka_korfu if hover over both links "Click Here To Show Image" you will see same image, but I put two different images? where is the problem? any ideas? Code: <a href="#" onMouseOver="ShowPicture('Style',1)" onMouseOut="ShowPicture('Style',0)">Click Here To Show Image</a>
<div id="Style"><img src="/sites/default/files/peroulades.jpg"></div>
<a href="#" onMouseOver="ShowPicture('Style',1)" onMouseOut="ShowPicture('Style',0)">Click Here To Show Image</a>
<div id="Style"><img src="/sites/default/files/pantokrator.jpg"></div>
This is what my code is supposed to do: 1. create a select list that changes the photo showing, (which I have) 2. create script so that when the user hovers over the image it shows a div 3. when the users mouse is off the image/div shows the coordinates where it last left 4. on mouseout hides the div again (this is the part I'm stuck on) This is my html: Code: <style>
#selectdiv
{
position:absolute;
left:10px;
top:10px;
width:400px;
height:400px;
}
#mylist
{
position: absolute;
left: 200px;
top: 100px;
width:inherit;
height:inherit;
}
#myyellow
{
position: absolute;
left: 600px;
top: 100px;
width:300px;
height:200px;
background-color:#FF3;
}
</style>
<body>
<div id="selectdiv">
<h1 style="font-size:28px">Select a Beatle</h1>
<select name="beatles" size="1" id="myselect" onchange="showDiv();">
<option value="-">-</option>
<option value="J">John</option>
<option value="P">Paul</option>
<option value="G">George</option>
<option value="R">Ringo</option>
</select>
</div>
<div id="mylist" style="display:none" onmouseover="showYellow(event);" onmouseout="showpixels(event)"></div>
<div id="John" style="display:none">
<img src="beatles_john.jpg" />
</div>
<div id="Paul" style="display:none">
<img src="beatles_paul.jpg" />
</div>
<div id="George" style="display:none">
<img src="beatles_george.jpg" />
</div>
<div id="Ringo" style="display:none">
<img src="beatles_ringo.jpg" />
</div>
<div id="myyellow" style="display:none"></div>
<div id="msg"></div>
</body>
This is my script: Code: function showDiv()
{
var mySelect = document.getElementById("myselect");
var myList = document.getElementById("mylist");
switch (mySelect.value)
{
case 'J':
myDiv = document.getElementById("John");
myList.innerHTML = myDiv.innerHTML;
myList.style.display = "block"; //Makes div viewable
break;
case 'P':
myDiv = document.getElementById("Paul");
myList.innerHTML = myDiv.innerHTML;
myList.style.display = "block"; //Makes div viewable
break;
case 'G':
myDiv = document.getElementById("George");
myList.innerHTML = myDiv.innerHTML;
myList.style.display = "block"; //Makes div viewable
break;
case 'R':
myDiv = document.getElementById("Ringo");
myList.innerHTML = myDiv.innerHTML;
myList.style.display = "block"; //Makes div viewable
break;
}
}
function showYellow(event)
{
var myyellow = document.getElementById("myyellow");
myyellow.style.display = "block";
}
function showpixels(event)
{
x=event.clientX
y=event.clientY
var myMsg = document.getElementById("msg");
myMsg.innerHTML = "X coords: " + x + ", Y coords: " + y;
}
Any feed back is greatly appreciated. I am not sure if this is a javascript problem or an html problem. I have posted the code below. The main two areas that I am interested in are 1) the area where the photo is shown in the larger size, and 2) the thumbnails below the larger picture. Right now in the img tag of the first image I have specified a height and width of 450px. The result is that when one hovers the mouse over the thumbnails, all pictures are shown at that size, regardless if they are larger or smaller than 450 x 450 pixels. I am not concerned about the larger images because I will use a script to scale those that someone on this forum was so kind enough to provide me with. The IMPORTANT PART IS HE I am concerned with smaller images. If you remove the height and width portion from the image tag, when you hover the mouse over a picture that's smaller than the others, such as the last one, which is smaller than all the others that are at 450 x 450, the thumbnails "move up". I would like the thumbnails to remain where they are at / for the top area where the photos are displayed to always be the same size, such as 450 x 450 px., and for the smaller pictures to be shown in the center in that area. How can this be done? Note: The entire portion of the stylesheet is not present. Let me know if something important is missing. Code: <html>
<head>
<meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type">
<title>MouseOver-Images</title>
<style type="text/css">
td#kdwhdMAINPHOTO { width: 616px; vertical-align: top; }
table#kdwhdTHUMB { margin-top: 12px; }
td#kdwhdTHUMBNAILS { background-image:
url(http://www.sunandfuninoc.com/testingsites/gems4me/images/t_28.jpg);
width: 616px; height: 114px; text-align: center; }
td#kdwhdTHUMBNAILS img { border: 1px solid #696969; }
td#kdwhdTABLE { width: 296px; vertical-align: top; }
-->
</style>
</head>
<body>
<table style="width: 924px;" border="0" cellpadding="0"
cellspacing="0">
<tbody>
<tr>
<td id="kdwhdMAINPHOTO"
style="text-align: center; background-color: white;">
<!--Image 1--> <img
src="http://site.gems4me.com/images/red2.jpg" alt="Item photo"
name="swap" style="border: 0px solid rgb(105, 105, 105);"
height="450" width="450">
<table id="kdwhdTHUMB" border="0" cellpadding="0"
cellspacing="0" width="616">
<tbody>
<tr>
<td><img
src="http://www.sunandfuninoc.com/testingsites/gems4me/images/t_26.jpg"
alt="Click on the picture below to enlarge" height="25"
width="616"></td>
</tr>
<tr>
<td><img
src="http://www.sunandfuninoc.com/testingsites/gems4me/images/t_27.jpg"
alt="" height="10" width="616"></td>
</tr>
<tr>
<td id="kdwhdTHUMBNAILS"><!--Image 1--><img
src="http://site.gems4me.com/images/450by450.jpg"
alt="Item photo"
onmouseover="document.swap.src='http://site.gems4me.com/images/450by450.jpg';"
height="80">
<!--Image 2--> <img
src="http://site.gems4me.com/images/450by450-2.jpg"
alt="Item photo"
onmouseover="document.swap.src='http://site.gems4me.com/images/450by450-2.jpg';"
height="80">
<!--Image 3--> <img
src="http://site.gems4me.com/images/450by450.jpg"
alt="Item photo"
onmouseover="document.swap.src='http://site.gems4me.com/images/450by450.jpg';"
height="80">
<!--Image 4--> <img
src="http://site.gems4me.com/images/450by450-2.jpg"
alt="Item photo"
onmouseover="document.swap.src='http://site.gems4me.com/images/450by450-2.jpg';"
height="80">
<!--Image 5--> <img
src="http://site.gems4me.com/images/red2.jpg" alt="Item photo"
onmouseover="document.swap.src='http://site.gems4me.com/images/red2.jpg';"
height="80"></td>
</tr>
<tr>
<td><img
src="http://www.sunandfuninoc.com/testingsites/gems4me/images/t_29.jpg"
alt="" height="10" width="616"></td>
</tr>
</tbody>
</table>
</td>
<td><img
src="http://www.sunandfuninoc.com/testingsites/gems4me/images/spacer.gif"
alt="" height="1" width="12"></td>
<td id="kdwhdTABLE">
<table border="0" cellpadding="5" cellspacing="0"
width="296">
<tbody>
<tr>
<td colspan="2" id="kdwhdTABLETITLE">Stuff</td>
</tr>
<tr>
<td class="kdwhdSPECR1C1" nowrap="nowrap">Stuff</td>
<td class="kdwhdSPECR1C2">Stuff</td>
</tr>
<tr>
<td class="kdwhdSPECR2C1" nowrap="nowrap">Stuff</td>
<td class="kdwhdSPECR2C2">Stuff
</td>
</tr>
<tr>
<td class="kdwhdSPECR2C1" nowrap="nowrap">Stuff</td>
<td class="kdwhdSPECR2C2">Stuff</td>
</tr>
<tr>
<td class="kdwhdSPECR2C1" nowrap="nowrap">Stuff</td>
<td class="kdwhdSPECR2C2">Stuff</td>
</tr>
<tr>
<td class="kdwhdSPECR2C1" nowrap="nowrap">Stuff</td>
<td class="kdwhdSPECR2C2">Stuff</td>
</tr>
<tr>
<td class="kdwhdSPECR2C1" nowrap="nowrap">Stuff</td>
<td class="kdwhdSPECR2C2">Stuff</td>
</tr>
<tr>
<td class="kdwhdSPECR2C1" nowrap="nowrap">Stuff</td>
<td class="kdwhdSPECR2C2">Stuff</td>
</tr>
<tr>
<td class="kdwhdSPECR2C1" nowrap="nowrap">Stuff</td>
<td class="kdwhdSPECR2C2">Stuff</td>
</tr>
<tr>
<td class="kdwhdSPECR2C1" nowrap="nowrap">Stuff</td>
<td class="kdwhdSPECR2C2">Stuff</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</body>
</html>
I am assuming that this is an issue with the js on my index page: http://www.yourbusybee.com/fb/ The main menu on this page has a sub-menu under "About". I've tried changing the CSS for the menu in order to make that sub-menu background be 50% transparent, but nothing is fixing it. I see things about "fade" within the js code, but I just don't see how to set how far it fades in or out. Can anyone assist me with this? I'd be awfully appreciative! Thanks in advance. ~Laura I need a code that makes the following: 1. I need a link to a certain website 2. If someone click that link it opens in new tab and it makes 1. link invisible and show a another link on the same place with a time delay of 5 seconds I recently installed a dynamic slideshow on my server and tried eliminating the background from "black" to "none" in the fadeslideshow.js so I could use transparent images to reveal the blue background on my site, but for some reason slide 1 stays on screen when switching to slide 2... not sure what to do, would appreciate any help. Thanks, Josh. please visit to view slideshow error http://www.scannmarketing.com Code: /* Ultimate Fade-in slideshow (v2.4)
* Last updated: May 24th, 2010. This notice must stay intact for usage
* Author: Dynamic Drive at http://www.dynamicdrive.com/
* Visit http://www.dynamicdrive.com/ for full source code
*/
//Oct 6th, 09' (v2.1): Adds option to randomize display order of images, via new option displaymode.randomize
//May 24th, 10' (v2.4): Adds new "peakaboo" option to "descreveal" setting. oninit and onslide event handlers added.
var fadeSlideShow_descpanel={
controls: [['x.png',7,7], ['restore.png',10,11], ['loading.gif',54,55]], //full URL and dimensions of close, restore, and loading images
fontStyle: 'normal 11px Verdana', //font style for text descriptions
slidespeed: 200 //speed of description panel animation (in millisec)
}
//No need to edit beyond here...
jQuery.noConflict()
function fadeSlideShow(settingarg){
this.setting=settingarg
settingarg=null
var setting=this.setting
setting.fadeduration=setting.fadeduration? parseInt(setting.fadeduration) : 500
setting.curimage=(setting.persist)? fadeSlideShow.routines.getCookie("gallery-"+setting.wrapperid) : 0
setting.curimage=setting.curimage || 0 //account for curimage being null if cookie is empty
setting.currentstep=0 //keep track of # of slides slideshow has gone through (applicable in displaymode='auto' only)
setting.totalsteps=setting.imagearray.length*(setting.displaymode.cycles>0? setting.displaymode.cycles : Infinity) //Total steps limit (applicable in displaymode='auto' only w/ cycles>0)
setting.fglayer=0, setting.bglayer=1 //index of active and background layer (switches after each change of slide)
setting.oninit=setting.oninit || function(){}
setting.onslide=setting.onslide || function(){}
if (setting.displaymode.randomize) //randomly shuffle order of images?
setting.imagearray.sort(function() {return 0.5 - Math.random()})
var preloadimages=[] //preload images
setting.longestdesc="" //get longest description of all slides. If no desciptions defined, variable contains ""
for (var i=0; i<setting.imagearray.length; i++){ //preload images
preloadimages[i]=new Image()
preloadimages[i].src=setting.imagearray[i][0]
if (setting.imagearray[i][3] && setting.imagearray[i][3].length>setting.longestdesc.length)
setting.longestdesc=setting.imagearray[i][3]
}
var closebutt=fadeSlideShow_descpanel.controls[0] //add close button to "desc" panel if descreveal="always"
setting.closebutton=(setting.descreveal=="always")? '<img class="close" src="'+closebutt[0]+'" style="float:right;cursor:hand;cursor:pointer;width:'+closebutt[1]+'px;height:'+closebutt[2]+'px;margin-left:2px" title="Hide Description" />' : ''
var slideshow=this
jQuery(document).ready(function($){ //fire on DOM ready
var setting=slideshow.setting
var fullhtml=fadeSlideShow.routines.getFullHTML(setting.imagearray) //get full HTML of entire slideshow
setting.$wrapperdiv=$('#'+setting.wrapperid).css({position:'relative', visibility:'visible', background:'black', overflow:'hidden', width:setting.dimensions[0], height:setting.dimensions[1]}).empty() //main slideshow DIV
if (setting.$wrapperdiv.length==0){ //if no wrapper DIV found
alert("Error: DIV with ID \""+setting.wrapperid+"\" not found on page.")
return
}
setting.$gallerylayers=$('<div class="gallerylayer"></div><div class="gallerylayer"></div>') //two stacked DIVs to display the actual slide
.css({position:'absolute', left:0, top:0, width:'100%', height:'100%', background:'black'})
.appendTo(setting.$wrapperdiv)
var $loadingimg=$('<img src="'+fadeSlideShow_descpanel.controls[2][0]+'" style="position:absolute;width:'+fadeSlideShow_descpanel.controls[2][1]+';height:'+fadeSlideShow_descpanel.controls[2][2]+'" />')
.css({left:setting.dimensions[0]/2-fadeSlideShow_descpanel.controls[2][1]/2, top:setting.dimensions[1]/2-fadeSlideShow_descpanel.controls[2][2]}) //center loading gif
.appendTo(setting.$wrapperdiv)
var $curimage=setting.$gallerylayers.html(fullhtml).find('img').hide().eq(setting.curimage) //prefill both layers with entire slideshow content, hide all images, and return current image
if (setting.longestdesc!="" && setting.descreveal!="none"){ //if at least one slide contains a description (versus feature is enabled but no descriptions defined) and descreveal not explicitly disabled
fadeSlideShow.routines.adddescpanel($, setting)
if (setting.descreveal=="always"){ //position desc panel so it's visible to begin with
setting.$descpanel.css({top:setting.dimensions[1]-setting.panelheight})
setting.$descinner.click(function(e){ //asign click behavior to "close" icon
if (e.target.className=="close"){
slideshow.showhidedescpanel('hide')
}
})
setting.$restorebutton.click(function(e){ //asign click behavior to "restore" icon
slideshow.showhidedescpanel('show')
$(this).css({visibility:'hidden'})
})
}
else if (setting.descreveal=="ondemand"){ //display desc panel on demand (mouseover)
setting.$wrapperdiv.bind('mouseenter', function(){slideshow.showhidedescpanel('show')})
setting.$wrapperdiv.bind('mouseleave', function(){slideshow.showhidedescpanel('hide')})
}
}
setting.$wrapperdiv.bind('mouseenter', function(){setting.ismouseover=true}) //pause slideshow mouseover
setting.$wrapperdiv.bind('mouseleave', function(){setting.ismouseover=false})
if ($curimage.get(0).complete){ //accounf for IE not firing image.onload
$loadingimg.hide()
slideshow.paginateinit($)
slideshow.showslide(setting.curimage)
}
else{ //initialize slideshow when first image has fully loaded
$loadingimg.hide()
slideshow.paginateinit($)
$curimage.bind('load', function(){slideshow.showslide(setting.curimage)})
}
setting.oninit.call(slideshow) //trigger oninit() event
$(window).bind('unload', function(){ //clean up and persist
if (slideshow.setting.persist) //remember last shown image's index
fadeSlideShow.routines.setCookie("gallery-"+setting.wrapperid, setting.curimage)
jQuery.each(slideshow.setting, function(k){
if (slideshow.setting[k] instanceof Array){
for (var i=0; i<slideshow.setting[k].length; i++){
if (slideshow.setting[k][i].tagName=="DIV") //catches 2 gallerylayer divs, gallerystatus div
slideshow.setting[k][i].innerHTML=null
slideshow.setting[k][i]=null
}
}
})
slideshow=slideshow.setting=null
})
})
}
fadeSlideShow.prototype={
navigate:function(keyword){
var setting=this.setting
clearTimeout(setting.playtimer)
if (setting.displaymode.type=="auto"){ //in auto mode
setting.displaymode.type="manual" //switch to "manual" mode when nav buttons are clicked on
setting.displaymode.wraparound=true //set wraparound option to true
}
if (!isNaN(parseInt(keyword))){ //go to specific slide?
this.showslide(parseInt(keyword))
}
else if (/(prev)|(next)/i.test(keyword)){ //go back or forth inside slide?
this.showslide(keyword.toLowerCase())
}
},
showslide:function(keyword){
var slideshow=this
var setting=slideshow.setting
if (setting.displaymode.type=="auto" && setting.ismouseover && setting.currentstep<=setting.totalsteps){ //if slideshow in autoplay mode and mouse is over it, pause it
setting.playtimer=setTimeout(function(){slideshow.showslide('next')}, setting.displaymode.pause)
return
}
var totalimages=setting.imagearray.length
var imgindex=(keyword=="next")? (setting.curimage<totalimages-1? setting.curimage+1 : 0)
: (keyword=="prev")? (setting.curimage>0? setting.curimage-1 : totalimages-1)
: Math.min(keyword, totalimages-1)
var $slideimage=setting.$gallerylayers.eq(setting.bglayer).find('img').hide().eq(imgindex).show() //hide all images except current one
var imgdimensions=[$slideimage.width(), $slideimage.height()] //center align image
$slideimage.css({marginLeft: (imgdimensions[0]>0 && imgdimensions[0]<setting.dimensions[0])? setting.dimensions[0]/2-imgdimensions[0]/2 : 0})
$slideimage.css({marginTop: (imgdimensions[1]>0 && imgdimensions[1]<setting.dimensions[1])? setting.dimensions[1]/2-imgdimensions[1]/2 : 0})
if (setting.descreveal=="peekaboo" && setting.longestdesc!=""){ //if descreveal is set to "peekaboo", make sure description panel is hidden before next slide is shown
clearTimeout(setting.hidedesctimer) //clear hide desc panel timer
slideshow.showhidedescpanel('hide', 0) //and hide it immediately
}
setting.$gallerylayers.eq(setting.bglayer).css({zIndex:1000, opacity:0}) //background layer becomes foreground
.stop().css({opacity:0}).animate({opacity:1}, setting.fadeduration, function(){ //Callback function after fade animation is complete:
clearTimeout(setting.playtimer)
try{
setting.onslide.call(slideshow, setting.$gallerylayers.eq(setting.fglayer).get(0), setting.curimage)
}catch(e){
alert("Fade In Slideshow error: An error has occured somwhere in your code attached to the \"onslide\" event: "+e)
}
if (setting.descreveal=="peekaboo" && setting.longestdesc!=""){
slideshow.showhidedescpanel('show')
setting.hidedesctimer=setTimeout(function(){slideshow.showhidedescpanel('hide')}, setting.displaymode.pause-fadeSlideShow_descpanel.slidespeed)
}
setting.currentstep+=1
if (setting.displaymode.type=="auto"){
if (setting.currentstep<=setting.totalsteps || setting.displaymode.cycles==0)
setting.playtimer=setTimeout(function(){slideshow.showslide('next')}, setting.displaymode.pause)
}
}) //end callback function
setting.$gallerylayers.eq(setting.fglayer).css({zIndex:999}) //foreground layer becomes background
setting.fglayer=setting.bglayer
setting.bglayer=(setting.bglayer==0)? 1 : 0
setting.curimage=imgindex
if (setting.$descpanel){
setting.$descpanel.css({visibility:(setting.imagearray[imgindex][3])? 'visible' : 'hidden'})
if (setting.imagearray[imgindex][3]) //if this slide contains a description
setting.$descinner.empty().html(setting.closebutton + setting.imagearray[imgindex][3])
}
if (setting.displaymode.type=="manual" && !setting.displaymode.wraparound){
this.paginatecontrol()
}
if (setting.$status) //if status container defined
setting.$status.html(setting.curimage+1 + "/" + totalimages)
},
showhidedescpanel:function(state, animateduration){
var setting=this.setting
var endpoint=(state=="show")? setting.dimensions[1]-setting.panelheight : this.setting.dimensions[1]
setting.$descpanel.stop().animate({top:endpoint}, (typeof animateduration!="undefined"? animateduration : fadeSlideShow_descpanel.slidespeed), function(){
if (setting.descreveal=="always" && state=="hide")
setting.$restorebutton.css({visibility:'visible'}) //show restore button
})
},
paginateinit:function($){
var slideshow=this
var setting=this.setting
if (setting.togglerid){ //if toggler div defined
setting.$togglerdiv=$("#"+setting.togglerid)
setting.$prev=setting.$togglerdiv.find('.prev').data('action', 'prev')
setting.$next=setting.$togglerdiv.find('.next').data('action', 'next')
setting.$prev.add(setting.$next).click(function(e){ //assign click behavior to prev and next controls
var $rel="nofollow" target=$(this)
slideshow.navigate($target.data('action'))
e.preventDefault()
})
setting.$status=setting.$togglerdiv.find('.status')
}
},
paginatecontrol:function(){
var setting=this.setting
setting.$prev.css({opacity:(setting.curimage==0)? 0.4 : 1}).data('action', (setting.curimage==0)? 'none' : 'prev')
setting.$next.css({opacity:(setting.curimage==setting.imagearray.length-1)? 0.4 : 1}).data('action', (setting.curimage==setting.imagearray.length-1)? 'none' : 'next')
if (document.documentMode==8){ //in IE8 standards mode, apply opacity to inner image of link
setting.$prev.find('img:eq(0)').css({opacity:(setting.curimage==0)? 0.4 : 1})
setting.$next.find('img:eq(0)').css({opacity:(setting.curimage==setting.imagearray.length-1)? 0.4 : 1})
}
}
}
fadeSlideShow.routines={
getSlideHTML:function(imgelement){
var layerHTML=(imgelement[1])? '<a href="'+imgelement[1]+'" rel="nofollow" target="'+imgelement[2]+'">\n' : '' //hyperlink slide?
layerHTML+='<img src="'+imgelement[0]+'" style="border-width:0;" />\n'
layerHTML+=(imgelement[1])? '</a>\n' : ''
return layerHTML //return HTML for this layer
},
getFullHTML:function(imagearray){
var preloadhtml=''
for (var i=0; i<imagearray.length; i++)
preloadhtml+=this.getSlideHTML(imagearray[i])
return preloadhtml
},
adddescpanel:function($, setting){
setting.$descpanel=$('<div class="fadeslidedescdiv"></div>')
.css({position:'absolute', visibility:'hidden', width:'100%', left:0, top:setting.dimensions[1], font:fadeSlideShow_descpanel.fontStyle, zIndex:'1001'})
.appendTo(setting.$wrapperdiv)
$('<div class="descpanelbg"></div><div class="descpanelfg"></div>') //create inner nav panel DIVs
.css({position:'absolute', left:0, top:0, width:setting.$descpanel.width()-8, padding:'4px'})
.eq(0).css({background:'black', opacity:0.7}).end() //"descpanelbg" div
.eq(1).css({color:'white'}).html(setting.closebutton + setting.longestdesc).end() //"descpanelfg" div
.appendTo(setting.$descpanel)
setting.$descinner=setting.$descpanel.find('div.descpanelfg')
setting.panelheight=setting.$descinner.outerHeight()
setting.$descpanel.css({height:setting.panelheight}).find('div').css({height:'100%'})
if (setting.descreveal=="always"){ //create restore button
setting.$restorebutton=$('<img class="restore" title="Restore Description" src="' + fadeSlideShow_descpanel.controls[1][0] +'" style="position:absolute;visibility:hidden;right:0;bottom:0;z-index:1002;width:'+fadeSlideShow_descpanel.controls[1][1]+'px;height:'+fadeSlideShow_descpanel.controls[1][2]+'px;cursor:pointer;cursor:hand" />')
.appendTo(setting.$wrapperdiv)
}
},
getCookie:function(Name){
var re=new RegExp(Name+"=[^;]+", "i"); //construct RE to search for target name/value pair
if (document.cookie.match(re)) //if cookie found
return document.cookie.match(re)[0].split("=")[1] //return its value
return null
},
setCookie:function(name, value){
document.cookie = name+"=" + value + ";path=/"
}
}
Hi I have a problem where I have a drop down menu above a flash banner. The drop down is being hidden by the banner when you hover over it. I added the following to stop that <param name='wmode' value='transparent'>. Its working fine in IE 6 where the drop down options are over the banner but it wont work with IE7/8 or firefox. Any suggestions for code that will work for all browsers? Code: document.write("<object classid='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000' codebase='http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0' width='381' height='130'><param name='allowScriptAccess' value='sameDomain' /><param name='movie' value='/content/images/flash/abc.swf'><param name='quality' value='high'><param name='wmode' value='transparent'><embed src='/content/images/flash/abc.swf' wmode='transparent' quality='high' pluginspage='http://www.macromedia.com/go/getflashplayer' type='application/x-shockwave-flash' width='381' height='130'></embed></object>");
Hi there, I am trying to open some SWF videos from an HTML page. When the user clicks the link, I would like to have the videos open in a transparent window (not a separate browser wndow). I have figured out how to embed the files and have them open in a transparent window as soon as you load/refresh the page but I want to open the SWF using a link. Any suggestions? Thank you all. B I have created a page using the code below and it works fine. Is there any way that I can replicate the gallery further down the page using different images? When I try, the mouseover on the top gallery opens the images in the bottom gallery. Code: <script>
function changeimage(towhat,url){
if (document.images){
document.images.targetimage.src=towhat.src
gotolink=url
}
}
function sshow(){
window.location=gotolink
}
</script>
<script language="JavaScript1.1">
var myimages=new Array()
var gotolink="#"
function preloadimages(){
for (i=0;i<preloadimages.arguments.length;i++){
myimages[i]=new Image()
myimages[i].src=preloadimages.arguments[i]
}
}
preloadimages("i/1-big.jpg","i/2-big.jpg","i/3-big.jpg","i/4-big.jpg")
</script>
<script>
function changeimage(towhat,url){
if (document.images){
document.images.targetimage.src=towhat.src
gotolink=url
}
}
function sshow(){
window.location=gotolink
}
</script>
I set up an image mouseover for the next button but its not working. I have two images set up but the second one wont appear when mousing over image. You can see it at www.college-ebook.com http://www.outwarstop.com/woz/woz09r3a.php On this page located around where it says Drops under where it says "Sha-Zhul ArchDemon [60]" are the mouseover's but the location of the popup doesnt come up at the mouse, but on the left side of the table, i need help gettin the popup to appear where the mouse is located. I would like to have an image color change when mousing over it, thus defining it as a link. What do I have to do to make this happen? Thanks.
The following piece of codes work like this: When mouse pointer is moved over the Button, the text of the button changes; When it is moved out of the button, the background color of the button changes. <html> <head> <script type="text/javascript"> function over(e) { if(e.toElement){ if(e.toElement.tagName.toLowerCase() == "input"){ e.toElement.value="IE New"; } } } function out(event) { if (event.srcElement){ if(event.srcElement.tagName.toLowerCase() == "input"){ event.srcElement.style.background= "green"; } } } </script> </head> <body> <div id="1">aaaaaaaaaaaaaaaaaa </div> <input type="button" value="Button 1" onmouseout="out(event)" onmouseover="over(event)" /> </body> </html> This sequence works fine, until the following case: First let's see the direction of the button: (left) <--------> BUTTON <--------> (right) Now, move the mouse over to the button, from the right side of the button, both the text and the background color of the button are changed. Obviously, the mousemoveout event is also triggered. I believe in this case, only the mousemoveover event should be triggered. What caused this? Thanks Scott Good morning all, I am trying to write a JavaScript that performs the following action: When I roll my mouse over on a paragraph with a Code: <p class="hover-target"> Paragraph goes here</p> It will do a reverse video of it. Currently the web page is in white background, black text. So when the mouse rolls over that particular paragraph it will be a black background, white text for that paragraph only. The JavaScript I wrote is: Code: {
Core.start
(
( function()
{
function mouseoverListener(evt)
{
evt = evt ? evt : window.event;
core.addClass (this, " over");
}
function mouseoutListener(evt)
{
evt = evt ? evt : window.event;
core.removeClass (this, " over");
}
return {
init: function()
{
var allElements = document.getElementsByTagName('*');
for (var i = 0; i < allElements.length; i++);
{
if (core.hasClass(allElements[i], "hover-target"))
core.addEventListener(allElements[i], 'mouseover', mouseoverListener);
core.addEventListener(allElements[i], 'mouseout', mouseoutListener);
}
}
};
}
)()
);
}
The HTML document has the right path to the scripts (core. js and the rollover.js) as well as the stylesheet (index_style.css). Also, the CSS stylesheet code is: Code: .over{
color:white;
background:black;
}
There is more to this stylesheet but I am only highlighting the rollover style. Am I missing something from my code? Thanks for your time. |
|||||||