|
JavaScript - Newbie: Onmouseover Popup
Dear all,
Im a complete newbie to javascript and I've basically copied and pasted the javascript I found here to use on my site. Javascript source: http://dynamicdrive.com/dynamicindex5/main.js My testpage: http://bisc.cse.ucsc.edu/test.html The console throws the error 'Cannot set property 'innerHTML' of null' in main.js:126 I marked line 126 with '>>', it happens in function stm Code: <!--
/*
Pleas leave this notice.
DHTML tip message version 1.2 copyright Essam Gamal 2003 (http://migoicons.tripod.com, migoicons@hotmail.com)
All modifications are done in the style.js you should not modify this file. Created on : 06/03/2003
Script featured on and can be found at Dynamic Drive (http://www.dynamicdrive.com)
*/
var ua = navigator.userAgent
var ps = navigator.productSub
var dom = (document.getElementById)? 1:0
var ie4 = (document.all&&!dom)? 1:0
var ie5 = (document.all&&dom)? 1:0
var nn4 =(navigator.appName.toLowerCase() == "netscape" && parseInt(navigator.appVersion) == 4)
var nn6 = (dom&&!ie5)? 1:0
var sNav = (nn4||nn6||ie4||ie5)? 1:0
var cssFilters = ((ua.indexOf("MSIE 5.5")>=0||ua.indexOf("MSIE 6")>=0)&&ua.indexOf("Opera")<0)? 1:0
var Style=[],Text=[],Count=0,sbw=0,move=0,hs="",mx,my,scl,sct,ww,wh,obj,sl,st,ih,iw,vl,hl,sv,evlh,evlw,tbody
var HideTip = "eval(obj+sv+hl+';'+obj+sl+'=0;'+obj+st+'=-800')"
var doc_root = ((ie5&&ua.indexOf("Opera")<0||ie4)&&document.compatMode=="CSS1Compat")? "document.documentElement":"document.body"
var PX = (nn6)? "px" :""
if(sNav) {
window.onresize = ReloadTip
document.onmousemove = MoveTip
if(nn4) document.captureEvents(Event.MOUSEMOVE)
}
if(nn4||nn6) {
mx = "e.pageX"
my = "e.pageY"
scl = "window.pageXOffset"
sct = "window.pageYOffset"
if(nn4) {
obj = "document.TipLayer."
sl = "left"
st = "top"
ih = "clip.height"
iw = "clip.width"
vl = "'show'"
hl = "'hide'"
sv = "visibility="
}
else obj = "document.getElementById('TipLayer')."
}
if(ie4||ie5) {
obj = "TipLayer."
mx = "event.x"
my = "event.y"
scl = "eval(doc_root).scrollLeft"
sct = "eval(doc_root).scrollTop"
if(ie5) {
mx = mx+"+"+scl
my = my+"+"+sct
}
}
if(ie4||dom){
sl = "style.left"
st = "style.top"
ih = "offsetHeight"
iw = "offsetWidth"
vl = "'visible'"
hl = "'hidden'"
sv = "style.visibility="
}
if(ie4||ie5||ps>=20020823) {
ww = "eval(doc_root).clientWidth"
wh = "eval(doc_root).clientHeight"
}
else {
ww = "window.innerWidth"
wh = "window.innerHeight"
evlh = eval(wh)
evlw = eval(ww)
sbw=15
}
function applyCssFilter(){
if(cssFilters&&FiltersEnabled) {
var dx = " progid:DXImageTransform.Microsoft."
TipLayer.style.filter = "revealTrans()"+dx+"Fade(Overlap=1.00 enabled=0)"+dx+"Inset(enabled=0)"+dx+"Iris(irisstyle=PLUS,motion=in enabled=0)"+dx+"Iris(irisstyle=PLUS,motion=out enabled=0)"+dx+"Iris(irisstyle=DIAMOND,motion=in enabled=0)"+dx+"Iris(irisstyle=DIAMOND,motion=out enabled=0)"+dx+"Iris(irisstyle=CROSS,motion=in enabled=0)"+dx+"Iris(irisstyle=CROSS,motion=out enabled=0)"+dx+"Iris(irisstyle=STAR,motion=in enabled=0)"+dx+"Iris(irisstyle=STAR,motion=out enabled=0)"+dx+"RadialWipe(wipestyle=CLOCK enabled=0)"+dx+"RadialWipe(wipestyle=WEDGE enabled=0)"+dx+"RadialWipe(wipestyle=RADIAL enabled=0)"+dx+"Pixelate(MaxSquare=35,enabled=0)"+dx+"Slide(slidestyle=HIDE,Bands=25 enabled=0)"+dx+"Slide(slidestyle=PUSH,Bands=25 enabled=0)"+dx+"Slide(slidestyle=SWAP,Bands=25 enabled=0)"+dx+"Spiral(GridSizeX=16,GridSizeY=16 enabled=0)"+dx+"Stretch(stretchstyle=HIDE enabled=0)"+dx+"Stretch(stretchstyle=PUSH enabled=0)"+dx+"Stretch(stretchstyle=SPIN enabled=0)"+dx+"Wheel(spokes=16 enabled=0)"+dx+"GradientWipe(GradientSize=1.00,wipestyle=0,motion=forward enabled=0)"+dx+"GradientWipe(GradientSize=1.00,wipestyle=0,motion=reverse enabled=0)"+dx+"GradientWipe(GradientSize=1.00,wipestyle=1,motion=forward enabled=0)"+dx+"GradientWipe(GradientSize=1.00,wipestyle=1,motion=reverse enabled=0)"+dx+"Zigzag(GridSizeX=8,GridSizeY=8 enabled=0)"+dx+"Alpha(enabled=0)"+dx+"Dropshadow(OffX=3,OffY=3,Positive=true,enabled=0)"+dx+"Shadow(strength=3,direction=135,enabled=0)"
}
}
function stm(t,s) {
if(sNav) {
if(t.length<2||s.length<25) {
var ErrorNotice = "DHTML TIP MESSAGE VERSION 1.2 ERROR NOTICE.\n"
if(t.length<2&&s.length<25) alert(ErrorNotice+"It looks like you removed an entry or more from the Style Array and Text Array of this tip.\nTheir should be 25 entries in every Style Array even though empty and 2 in every Text Array. You defined only "+s.length+" entries in the Style Array and "+t.length+" entry in the Text Array. This tip won't be viewed to avoid errors")
else if(t.length<2) alert(ErrorNotice+"It looks like you removed an entry or more from the Text Array of this tip.\nTheir should be 2 entries in every Text Array. You defined only "+t.length+" entry. This tip won't be viewed to avoid errors.")
else if(s.length<25) alert(ErrorNotice+"It looks like you removed an entry or more from the Style Array of this tip.\nTheir should be 25 entries in every Style Array even though empty. You defined only "+s.length+" entries. This tip won't be viewed to avoid errors.")
}
else {
var ab = "" ;var ap = ""
var titCol = (s[0])? "COLOR='"+s[0]+"'" : ""
var txtCol = (s[1])? "COLOR='"+s[1]+"'" : ""
var titBgCol = (s[2])? "BGCOLOR='"+s[2]+"'" : ""
var txtBgCol = (s[3])? "BGCOLOR='"+s[3]+"'" : ""
var titBgImg = (s[4])? "BACKGROUND='"+s[4]+"'" : ""
var txtBgImg = (s[5])? "BACKGROUND='"+s[5]+"'" : ""
var titTxtAli = (s[6] && s[6].toLowerCase()!="left")? "ALIGN='"+s[6]+"'" : ""
var txtTxtAli = (s[7] && s[7].toLowerCase()!="left")? "ALIGN='"+s[7]+"'" : ""
var add_height = (s[15])? "HEIGHT='"+s[15]+"'" : ""
if(!s[8]) s[8] = "Verdana,Arial,Helvetica"
if(!s[9]) s[9] = "Verdana,Arial,Helvetica"
if(!s[12]) s[12] = 1
if(!s[13]) s[13] = 1
if(!s[14]) s[14] = 200
if(!s[16]) s[16] = 0
if(!s[17]) s[17] = 0
if(!s[18]) s[18] = 10
if(!s[19]) s[19] = 10
hs = s[11].toLowerCase()
if(ps==20001108){
if(s[2]) ab="STYLE='border:"+s[16]+"px solid"+" "+s[2]+"'"
ap="STYLE='padding:"+s[17]+"px "+s[17]+"px "+s[17]+"px "+s[17]+"px'"}
var closeLink=(hs=="sticky")? "<TD ALIGN='right'><FONT SIZE='"+s[12]+"' FACE='"+s[8]+"'><A HREF='javascript:void(0)' ONCLICK='stickyhide()' STYLE='text-decoration:none;color:"+s[0]+"'><B>Close</B></A></FONT></TD>":""
var title=(t[0]||hs=="sticky")? "<TABLE WIDTH='100%' BORDER='0' CELLPADDING='0' CELLSPACING='0'><TR><TD "+titTxtAli+"><FONT SIZE='"+s[12]+"' FACE='"+s[8]+"' "+titCol+"><B>"+t[0]+"</B></FONT></TD>"+closeLink+"</TR></TABLE>" : ""
var txt="<TABLE "+titBgImg+" "+ab+" WIDTH='"+s[14]+"' BORDER='0' CELLPADDING='"+s[16]+"' CELLSPACING='0' "+titBgCol+" ><TR><TD>"+title+"<TABLE WIDTH='100%' "+add_height+" BORDER='0' CELLPADDING='"+s[17]+"' CELLSPACING='0' "+txtBgCol+" "+txtBgImg+"><TR><TD "+txtTxtAli+" "+ap+" VALIGN='top'><FONT SIZE='"+s[13]+"' FACE='"+s[9]+"' "+txtCol +">"+t[1]+"</FONT></TD></TR></TABLE></TD></TR></TABLE>"
if(nn4) {
with(eval(obj+"document")) {
open()
write(txt)
close()
}
}
>> else eval(obj+"innerHTML=txt")
tbody = {
Pos:s[10].toLowerCase(),
Xpos:s[18],
Ypos:s[19],
Transition:s[20],
Duration:s[21],
Alpha:s[22],
ShadowType:s[23].toLowerCase(),
ShadowColor:s[24],
Width:parseInt(eval(obj+iw)+3+sbw)
}
if(ie4) {
TipLayer.style.width = s[14]
tbody.Width = s[14]
}
Count=0
move=1
}
}
}
function MoveTip(e) {
if(move) {
var X,Y,MouseX = eval(mx),MouseY = eval(my); tbody.Height = parseInt(eval(obj+ih)+3)
tbody.wiw = parseInt(eval(ww+"+"+scl)); tbody.wih = parseInt(eval(wh+"+"+sct))
switch(tbody.Pos) {
case "left" : X=MouseX-tbody.Width-tbody.Xpos; Y=MouseY+tbody.Ypos; break
case "center": X=MouseX-(tbody.Width/2); Y=MouseY+tbody.Ypos; break
case "float": X=tbody.Xpos+eval(scl); Y=tbody.Ypos+eval(sct); break
case "fixed": X=tbody.Xpos; Y=tbody.Ypos; break
default: X=MouseX+tbody.Xpos; Y=MouseY+tbody.Ypos
}
if(tbody.wiw<tbody.Width+X) X = tbody.wiw-tbody.Width
if(tbody.wih<tbody.Height+Y+sbw) {
if(tbody.Pos=="float"||tbody.Pos=="fixed") Y = tbody.wih-tbody.Height-sbw
else Y = MouseY-tbody.Height
}
if(X<0) X=0
eval(obj+sl+"=X+PX;"+obj+st+"=Y+PX")
ViewTip()
}
}
function ViewTip() {
Count++
if(Count == 1) {
if(cssFilters&&FiltersEnabled) {
for(Index=28; Index<31; Index++) { TipLayer.filters[Index].enabled = 0 }
for(s=0; s<28; s++) { if(TipLayer.filters[s].status == 2) TipLayer.filters[s].stop() }
if(tbody.Transition == 51) tbody.Transition = parseInt(Math.random()*50)
var applyTrans = (tbody.Transition>-1&&tbody.Transition<24&&tbody.Duration>0)? 1:0
var advFilters = (tbody.Transition>23&&tbody.Transition<51&&tbody.Duration>0)? 1:0
var which = (applyTrans)?0:(advFilters)? tbody.Transition-23:0
if(tbody.Alpha>0&&tbody.Alpha<100) {
TipLayer.filters[28].enabled = 1
TipLayer.filters[28].opacity = tbody.Alpha
}
if(tbody.ShadowColor&&tbody.ShadowType == "simple") {
TipLayer.filters[29].enabled = 1
TipLayer.filters[29].color = tbody.ShadowColor
}
else if(tbody.ShadowColor&&tbody.ShadowType == "complex") {
TipLayer.filters[30].enabled = 1
TipLayer.filters[30].color = tbody.ShadowColor
}
if(applyTrans||advFilters) {
eval(obj+sv+hl)
if(applyTrans) TipLayer.filters[0].transition = tbody.Transition
TipLayer.filters[which].duration = tbody.Duration
TipLayer.filters[which].apply()
}
}
eval(obj+sv+vl)
if(cssFilters&&FiltersEnabled&&(applyTrans||advFilters)) TipLayer.filters[which].play()
if(hs == "sticky") move=0
}
}
function stickyhide() {
eval(HideTip)
}
function ReloadTip() {
if(nn4&&(evlw!=eval(ww)||evlh!=eval(wh))) location.reload()
else if(hs == "sticky") eval(HideTip)
}
function htm() {
if(sNav) {
if(hs!="keep") {
move=0;
if(hs!="sticky") eval(HideTip)
}
}
}
//-->
Any ideas/help/advice is greatly appreciated! Thank you! Similar TutorialsHello, On some pc's in IE my website shows disbehaviour with the popup-menu. When your mousepointer hoovers over the transparent border, the popupmenu disappears. Please check http://www.exintec.nl/test. Perhaps if you visit the website with Internet Explorer you can see what I mean, but it might be showing good as well. The menu is made with very little javascript and mainly CSS. I discovered the begin of the cause: when I don't use a transparent color for the border, it works fine. Also when I remove the underlying image (the sky-image) and still use transparent color it also works fine. How can this be? Using Z-index for the popup-window/menu and give it a real high number won't work. I really don't see it. Ofcourse I want to keep using the transparent color and the underlying image. ------------------- Source code HTML: --------------------- <ul id="menu"> <li onmouseover="toonPopUpMenu1()" onmouse-out="verwijderPopUpMenu1()"><a href="index.html" class="selected">OVER E<font co-lor="#548DD4">X</font>INTEC</a></li> <li onmouseover="toonPopUpMenu2()" onmouse-out="verwijderPopUpMenu2()"><a href="afdelingen.html">DIENSTEN</a></li> <li onmouseover="toonPopUpMenu3()" onmouse-out="verwijderPopUpMenu3()"><a href="waterstof_injectie.html">PROJECTEN</a></li> <li><a href="werkwijze.html">WERKWIJZE</a></li> <li><a href="contact.html">CONTACT</a></li> </ul> <ul id="popupmenu1" onmouseover="toonPopUpMenu1()" onmouse-out="verwijderPopUpMenu1()"> <li><a href="index.html" class="selected">Bedrijf</a></li> <li><a href="visie.html">Visie</a></li> <li><a href="missie.html">Missie</a></li> </ul> ----------- CSS-code ----------- #popupmenu1 { position: absolute; top: 25px; left: 141px; color: #FFFFFF; display: none; } #popupmenu1 li { border-bottom: solid transparent 4px; list-style-type: none; } #popupmenu1 li a { padding-left: 4px; padding-right: 0px; padding-bottom: 1px; padding-top: 1px; background-color: #000000; display: block; width: 155px; height: 20px; text-decoration: none; text-align: left; font-weight: 400; color: #FFFFFF; line-height: 20px; } #popupmenu1 li a.selected { font-weight: 900; } #popupmenu1 li a:hover { font-weight: 900; color: #FFFFFF; } ----------------- JS: ----------------- function toonPopUpMenu1() { var PopUpVenster=document.getElementById('popupmenu1'); PopUpVenster.style.display = 'block'; } function verwijderPopUpMenu1() { var PopUpVenster=document.getElementById('popupmenu1'); PopUpVenster.style.display = 'none'; } hi, please ignore this thread..it is a duplicate of one already active. MODS please delete. apologies for my mistake. Hi, Im a complete newbie to javascript and I've basically copied and pasted the javascript I found here to use on my site. Its an onMouseOver slideshow: http://www.javascriptkit.com/script/...ifferent.shtml to use on my site. Basically, my problem is how do I add a second, separate image in a different location on the web page, associated with this script? If I post <a href="javascript:warp()"><img src="myimage" name="targetimage" border=0></a> in two different locations, which is the script for the image, the script stops working, but having it once makes it work. So how do I add two different image locations? Can someone please help me here? I just want to add more images in a different location. ie have image location 1, and image location 2. Thanks in advance Script Below: Code: <script>
function changeimage(towhat,url){
if (document.images){
document.images.targetimage.src=towhat.src
gotolink=url
}
}
function warp(){
window.location=gotolink1
}
</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(my images here)
</script>
For the Links:
<a href="creativewriting.html" onMouseover="changeimage(myimages[1],this.href)">Creative Writing</a><br>
For the Image:
<a href="javascript:warp()"><img src="myimage" name="targetimage" border=0></a>
I'm trying to create a popup sign up form that will only popup every week. I don't want it to popup every time someone visits the site. I'm new to Javascript as a whole and can't seem to figure out how to set a cookie for a week and if there is no cookie (or the cookie has expired) it will popup automatically. If anyone can point out what I'm doing wrong it would be greatly appreciated. I feel like I'm so close and that the solution is staring me in the face. Here's the code that I have so far: function getCookie(c_name) { var i,x,y,ARRcookies=document.cookie.split(";"); for (i=0;i<ARRcookies.length;i++) { x=ARRcookies[i].substr(0,ARRcookies[i].indexOf("=")); y=ARRcookies[i].substr(ARRcookies[i].indexOf("=")+1); x=x.replace(/^\s+|\s+$/g,""); if (x==c_name) { return unescape(y); } } } function setCookie(c_name,value,exdays) { var exdate=new Date(); exdate.setDate(exdate.getDate() + 5); var c_value=escape(value) + ((exdays==null) ? "" : "; expires="+exdate.toUTCString()); document.cookie=c_name + "=" + c_value; } function checkCookie() { var username=getCookie(exdate); if (exdate!=null && exdate!="") { //Do Nothing } else { $(document).ready(function() { var id = '#dialog'; //Get the screen height and width var maskHeight = $(document).height(); var maskWidth = $(window).width(); //Set heigth and width to mask to fill up the whole screen $('#mask').css({'width':maskWidth,'height':maskHeight}); //transition effect $('#mask').fadeIn(1000); //Get the window height and width var winH = $(window).height(); var winW = $(window).width(); //Set the popup window to center $(id).css('top', winH/100-$(id).height()/2); $(id).css('left', winW/2-$(id).width()/2); //transition effect $(id).fadeIn(1000); $(id).animate({top:"+=300px"},1000); //if close button is clicked $('.window .close').click(function (e) { //Cancel the link behavior e.preventDefault(); $('.window').animate({right:"+=150px"}).animate({left:"1500px"}).fadeOut(50); $('#mask').hide(); }); //if NO Thanks button is clicked $('.window .noThanks').click(function (e) { //Cancel the link behavior e.preventDefault(); $('.window').animate({right:"+=150px"}).animate({left:"1500px"}).fadeOut(50); $('#mask').hide(); }); //if mask is clicked $('#mask').click(function () { $(this).hide(); $('.window').hide(); }); function hideHolder() { $('.place-holder').hide(); } function showHolder() { if($('.name-field').val() == '') { $('.place-holder').show() } } $('.name-field').focus(hideHolder); $('.name-field').blur(showHolder); $('.place-holder').click(function () { $('.name-field').trigger('focus'); }); }); } } Thank you for your help. :-) Hi, I'm kinda hoping this is possible but haven't found any reference to it... I have a parent page that opens a popup on click that launches a sidebar navigation on the right of the screen and resizes the parent page. What I am wanting to do is create a second popup (approx 250px high) that opens below the navigation (which is only around 600px high) but I have noticed that even when you have no status bar in the popup windows, they can still end up overlapping because of additional tools or plugins that the viewer has in their browser. Is there any way to get the popups to butt up against each other instead of overlapping? More like a relative popup? Any assistance would be appreciated. :-) Hi Guys im new to javascript but i have got this code so far to work Code: <script type="text/javascript">
function do_something(e)
{
document.getElementById('imgholder') .style.background="transparent url('images/img2.jpg') no-repeat";
}
</script>
and it works with this Code: <div id="flash">
<div id="imgholder">
</div>
<div id="myController2">
<span class="jFlowControl2">No 1 </span>
<span class="jFlowControl2">No 2 </span>
</div>
<div id="mySlides2">
<div>
<a onmouseover="do_something(this)" class="vm" href="#" title="Vulnerability Management"></a>
<a class="grc" href="#" title="grc"></a>
<a class="pci" href="#" title="pci"></a>
<a class="gcs" href="#" title="gcs"></a>
<a class="pt" href="#" title="Penetration Testing"> </a>
<span class="jFlowNext2 NextFlash"> </span>
</div>
<div>
<span class="jFlowPrev2 BackFlash"> </span>
</div>
</div>
</div>
Currently the background changes on the 1st link hover. is it possible to have different images load on the hover of different a's? any help would be appricated I have been googling this for two days and am coming to the conclusion that the answer is no. Am I correct?
Alright I know about the problems IE has, but I'm testing out an id that is titled "slideRecord1" and trying to move it. The functions work with Firefox for the onmouseover and onmouseout attributes. But IE doesn't support that. So I'm trying to do it manually in the Javascript, but it's still not reading it. Any help? Code: /* <![CDATA[ */
document.getElementById('slideRecord1').onmouseover = function(){slideRecord(1);}
function slideRecord(disc)
{
var record = "disc"+disc;
var y = 20;
document.getElementById(record).style.top = y + 'px';
}
function unSlideRecord(disc)
{
record = "disc"+disc;
var y = 0;
document.getElementById(record).style.top = y + 'px';
}
/* ]]> */
Hi I have a script that runs fine in FF, Chrome But in IE it does not work at all...(mouse over/mouseout) Would you please help me fix the problem... here is the code: Code: <script type="text/javascript">
var c=0;
var t;
var timer_is_on=0;
function timedCount()
{
document.getElementById('txt').value=c;
c=c+1;
t=setTimeout("timedCount()",1000);
}
window.onmouseout=doTimer;
function doTimer()
{
if (!timer_is_on)
{
timer_is_on=1;
timedCount();
}
}
function stopCount()
{
clearTimeout(t);
timer_is_on=0;
}
function descriptionKeyUp() {
if (timer === null) {
startTimer();
}
else {
clearTimeout(timestop);
}
timestop = setTimeout(stopTimer, 6000);
}
</script>
-----------------------
<form>
<textarea name="taskdesc" id="taskdesc" cols="45" rows="5"onmouseover="stopCount()" onkeyup="descriptionKeyUp()"></textarea>
<p>Time Spent on Other tasks:
<input type="text" name ="txt" id="txt" />
</p>
<p>Time Spent on Documenting:
<input type="input" name="seconds" id="timer" />
</form>
basically what it does is when user takes the mouse away from the form it counts the time...when user put the cursor in side the form...it stops counting...... hi ! i have a div which some how i make when mouseover it become cursor and link to other page i wants to, and it has also some text inside of it which is also linked to other page and when mouseover on text it change colors too, but the problem is if mouse come on div it will not change the color of text inside of div, so what i wants is it will change the color of text too when mouseover on the div, here is code i am using: Code: <-- THIS IS IN CSS file -->
div.test{
position:relative;
font-family:Arial;
font-size: 12px;
padding-left: 82px;
padding-top: 47px;
width: 162px;
padding-bottom: 15px;
cursor:pointer;
cursor:hand;
}
div.test a{
color:#000;
text-decoration: none;
}
div.test a:hover{
color:#4E6D00;
text-decoration: none;
}
<-- THIS IS IN HTML file -->
<div onClick="document.location='otherpage.html';" class="test">
<a href="otherpage.html">here is all content,This is content hyperlinked</a>
</div>
you notice i am using cursor in css so when mouseover it becomes hand, what i wants is when it will become hand the text inside of it will also change the color, for now it change only if i mouseover to that text, thanks for any quick help please Ok, I'm new to these form and I need help with an assignment. Hopefully I'm within the rules here as I most certainly don't want to get stung for plagiarism or cheating. But, here is my issue. I'm struggling with javascript and I can't manage to get this rollover effect working. The HTML side of things should be ok and it's probably a missing semicolon. Code: /* write functions that define the action for each event */
function showTip () {
var sidTip;
/* obtain access to the HTML tool tip element using id "sidTip" and link it a varialbe named sidTip */
sidTip = document.getElementById("sidTip");
/* display the HTML tool tip element sidTip bying change the value of its CSS property "display" to "inline" */
sidTip.style.display("inline");
}
function hideTip () {
/* this function hides the tool tip */
var = sidTip;
/*first, get access to the tool tip HTML element */
sidTip = document.getElementById("sidTip")
/* then, hide the tool tip HTML element by changing its CSS property "display" to "none" */
sidTip.style.display("none");
}
function init () {
alert("javascript working");
/* the init function links functions to appropriate events of corresponding HTML elements */
/* create a variable named sid */
var = sid;
/* get access to the HTML element by its id "sid" and link it to sid */
sid = document.getElementById("sid");
/* link function showTip to the onmouseover event of sid */
onMouseOver = showTip;
/* link function hideTip to the onmouseout event of sid */
onMouseOut = hideTip;
}
/* link function init to the onload event of the window so that function init will be called when the page is loaded */
window.onload = init;
/* another random comment belonging to hebdomad */
Hi all, This is my first post, Self Learned new programmer here :o) Here's what I am having problem with: 1) OnMouseOver is working well on Chrome, but does not do anything on IE. What am I doing wrong? 2) I want to put sound on OnMouseOver. I tried using different examples, but no luck. Can you help me with the code? Here's the full code just in case: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- saved from url=(0014)about:internet -->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">td img {display: block;}</style>
<!--Fireworks CS5 Dreamweaver CS5 target. Created Fri Nov 19 23:13:18 GMT-0500 (Eastern Standard Time) 2010-->
<script language="JavaScript">
<!-- Hide from old browsers
if (navigator.appVersion.indexOf("2.") != -1){
check = false;
}
if ((navigator.appVersion.indexOf("3.") != -1) && (navigator.appName.indexOf("Explorer") != -1)){
check = false;
}
else {
check = true;
}
image1= new Image();
image1.src = "img/index_r8_c4.gif";
image1on = new Image();
image1on.src = "img/index_r8_c4_RED.gif";
image2= new Image();
image2.src = "img/index_r4_c14.gif";
image2on = new Image();
image2on.src = "img/index_r4_c14_RED.gif";
function imageon(name) {
document[name].src = eval(name + "on.src");
}
function imageoff(name) {
document[name].src = eval(name + ".src");
}
function on(name) {
if (check == true){
imageon(name);
}
}
function off(name) {
if (check == true){
imageoff(name);
}
}
// -->
</script>
</head>
<body background="img/background.jpg">
<table border="0" cellpadding="0" cellspacing="0" width="1025" align="center">
<!-- fwtable fwsrc="main v1.png" fwpage="Page 1" fwbase="index.gif" fwstyle="Dreamweaver" fwdocid = "154491994" fwnested="0" -->
<tr>
<td><a href="OurPastWork.htm" onmouseover="on('image1');" onmouseout="off('image1')">
<img name="image1" src="img/index_r8_c4.gif" width="279" height="45" border="0" id="index_r8_c4" alt="" /></a></td>
<td><a href="OurExperience.htm" onmouseover="on('image2');" onmouseout="off('image2')">
<img name="image2" src="img/index_r4_c14.gif" width="186" height="50" border="0" id="index_r4_c14" alt="" /></a></td>
</tr>
</table>
</body>
</html>
Thanks in advance Hi I am new here and also to java Any help you can give me would be gratefuly appreciated as I feel I am being very dumb over what should be a simple fix. The following code is working accept for the part where the original image (Main Image) is replaced with either Image1/Image2 when mouse over occurs but wont revert back to its original image (MainImage) once onmouseout? There-in lies my problem: Code: <body>
<tr>
<!-- <td><table width="100%" bgcolor="#b0b0b0" border="0" cellpadding="10" cellspacing="1"> -->
<tbody><tr>
<td bgcolor="#ffffff">
<table width="86%" border="0" cellpadding="0" cellspacing="0">
<tbody><tr>
<script language="JavaScript" type="text/javascript">
function fda(pic){
document.getElementById("PicViewer").src=pic;
}
</script>
</table>
<div align="center">
<table border="0" cellPadding="0" width="950" height="650" style="border-collapse: collapse" bordercolor="#111111">
<tr>
<td width="15" bgcolor="#111111" height="542" rowspan="3">
<p align="center">
</td>
<td bgcolor="#405E76" height="650" colspan="9" background="http://www.mypersonalpage.talktalk.net/ebay/Webpage/polaroid.jpg" valign="top">
<p align="center">
<img src="http://i99.photobucket.com/albums/l290/big_poppa_duke/mainimg.png" class="biankuang2" id="PicViewer" border="0" width="640" height="480" vspace="55" hspace="0"></td>
<td width="15" bgcolor="#111111" height="542" rowspan="3">
</td>
</tr>
<tr>
<td width="15" bgcolor="#405E76" height="80">
</td>
<td width="121" bgcolor="#405E76" align="center">
</td>
<td width="145" bgcolor="#405E76" align="center">
</td>
<td width="145" bgcolor="#405E76" align="center">
<img border="2" src="http://i99.photobucket.com/albums/l290/big_poppa_duke/img2.png"class="biankuang2" onmouseover="fda(this.src)" width="125" height="93" vspace="2"></td>
<td bgcolor="#405E76" align="center" width="145">
</td>
<td width="145" bgcolor="#405E76" align="center">
<img border="2" src="http://i99.photobucket.com/albums/l290/big_poppa_duke/img3.png"class="biankuang2" onmouseover="fda(this.src)" width="125" height="93" vspace="2"></td>
<td width="145" bgcolor="#405E76" align="center">
</td>
<td width="121" bgcolor="#405E76" align="center">
</td>
<td width="14" bgcolor="#405E76">
</td>
</tr>
</table>
P.s something I found strange when loading my page it seems to load twice with a defining click. Very annoying and wonder if it's possible to remove that bit too. Thank you very much for any help. Hi, I use mostly PHP with my office's website as it usually requires some interaction with the server. However, i would like to do something that does not, and figured JS should be able to take care of it. I just can't get my head around it and would like to ask for some guidance...not the answer per say, just helping me get on the right path would be great! What i would like to do seems rather simple: I have a calendar. I would it to do one of two things: 1. Using onclick, when the user clicks on a date, i would like it to print something underneath the calendar. Similar to an error message that shows up on a login form if you type something wrong in a field using PHP (if(isset($whatever))). 2. Or using onMouseover, if the user hovers over a date that i have something special scheduled, i want a message to either pop up (alert()) or similar to #1, show up below the calendar. While fiddling with it this afternoon i figured i was close, but i am missing something... Code: <td><a href="#" onclick="document.getElementById("27").innerHTML='President's Day'; return false;">27</a></td>
But this seems to be pulling information from an element whose id = 27...which is not what i'd like.. Thanks in advance, Tsiqueira I am trying to alter Playa to use input type images instead of buttons. Part of this involves the need for a rollover image eg. a play button highlights when the cursor is over it. This is the code I have: Code: if (Playa.btnState == "Stop") {
document.getElementById("btnPlayStop").onmouseover = "this.src='images/stophover.gif'"
document.getElementById("btnPlayStop").onmouseout = "this.src='images/stop.gif'";
}
else {
document.getElementById("btnPlayStop").onmouseover = "this.src='images/playhover.gif'";
document.getElementById("btnPlayStop").onmouseout = "this.src='images/play.gif'";
}
<input type="image" src="images/stop.gif" onmouseover="this.src='images/stophover.gif'" onmouseout="this.src='images/stop.gif'" alt="Stop" id="btnPlayStop" onclick="Playa.doPlayStop();" />
Playa.btnState is the alt tag to say whether the state is stopped or started. I have the code working to alternate between "Play" and "Stop" images when the button is clicked, but the rollover doesn't happen. Any ideas? Thanks Alright, I'm trying to get this website finished within the next 5 hours. I was designing it in such a way that I have some rollover buttons that take me to various parts of the site. Then, I have a gallery page, where I have a simple rollover galley. Adding the rollover gallery has stopped my buttons at the top from working. First, my .js file Code: function swap_image(name,source) {
document.images[name].src=source;
var argv=swap_image.arguments;
if(argv[2] && argv[3] && document.getElementById) {
element=document.getElementById(argv[2]);
element.innerHTML=argv[3];
}
}
if (document.images) {
image0 = new Image;
image1 = new Image;
image2 = new Image;
image0.src = '/images/male_fem.jpg';
image1.src = '/images/moon_wmn.jpg';
image2.src = '/images/mobydick.jpg';
} else {
image0 = '';
image1 = '';
image2 = '';
document.rollimg = '';
}
var cap = ['Picture One',
'Second Picture',
'Three'];
function rollover(n) {
document.rollimg.src = window['image'+n].src;
document.getElementById('caption').innerHTML = cap[n];
}
Now a portion of my html.. Code: <a onmouseover="swap_image('gallery','/images/galleryro.jpg')" onmouseout="swap_image('gallery','/images/galleryhl.jpg')">
<img style = "top:150px; left:160px;" border="0" id="gallery" src="/images/galleryhl.jpg"/> </a>
<a href="timeline.htm" onmouseover="swap_image('timeline','/images/timelinero.jpg')" onmouseout="swap_image('timeline','/images/timeline.jpg')">
<img style = "top:150px; left:175px;" border="0" id="timeline" src="/images/timeline.jpg"/> </a>
<a href="biography.htm"onmouseover="swap_image('biography','/images/biographyro.jpg')" onmouseout="swap_image('biography','/images/biography.jpg')">
<img style = "top:150px; left:190px;" border="0" id="biography" src="/images/biography.jpg"/> </a>
<a href="contact.htm" onmouseover="swap_image('contact','/images/contactro.jpg')" onmouseout="swap_image('contact','/images/contact.jpg')">
<img style = "top:150px; left:205px;" border="0" id="contact" src="/images/contact.jpg"/> </a>
<div class = "lrgimg">
<p align = "center">
<img style = "top:150px" src="images/male_fem.jpg" width="auto" height="auto" border="0" alt="large" name="rollimg" />
</p>
</div>
<div class = "imgbar">
<p align = "center"><span onmouseover="document.rollimg.src=image0.src;">
<img style = "top:250px" src="images/male_fem_sm.jpg" width="32" height="32" border="0"alt="malefem"/> </span>
<span onmouseover="document.rollimg.src=image1.src;">
<img style = "top:250px" src="images/moon_wmn_sm.jpg" width="32" height="32" border="0" alt="moonwmn"/></span>
<span onmouseover="document.rollimg.src=image2.src;">
<img style = "top:250px" src="images/mobydick_sm.jpg" width="32" height="32" border="0" alt="mobydick"/></span>
</p>
</div>
</div>
Any help to quickly resolve the conflict, would be greatly appreciated. I don't have a lot of time. I have created a scroll script that, when you mouse over the page, the scrolling stops, and it resumes when you mouseout. For some reason, my script messes up slightly when you have <p>, <a>, <span>, and <div> tags inside the main div. On that page, even if you are moused over the page, it will still try to scroll a tiny bit. This is because it thinks you have moved your mouse out of the page. I have tried adding mouseover and mouseout events to these tags to remedy the problem, but that didn't work. Here's a link to an example with nothing but text, and it works fine: http://www.myfsjournal.com/scroll2.php Here's the same page, but with stuff inside of <p> and <a> tags. However, it doesn't work quite right. http://www.myfsjournal.com/scroll1.php You can view all the code on my page, but here's the relevant part: Code: var timerIsOn = 1;
window.onload = function()
{
startScroll();
var marqueeDiv = document.getElementById("marqueeDiv")
if(navigator.appName != "Microsoft Internet Explorer")
{
if(marqueeDiv != null)
{
marqueeDiv.addEventListener("mouseout",function () {resumeScroll();},false);
marqueeDiv.addEventListener("mouseover",function () {stopScroll();},false);
}
}
else
{
if(marqueeDiv != null)
{
marqueeDiv.attachEvent("onmouseout",function () {resumeScroll();},false);
marqueeDiv.attachEvent("onmouseover",function () {stopScroll();},false);
}
}
}
function startScroll()
{
if(timerIsOn == 1)
{
//if we have scrolled to the bottom
if(getScrollY() >= document.documentElement.scrollHeight - document.documentElement.clientHeight)
{
window.scroll(0,0);
}
window.scrollBy(0,1); // horizontal and vertical scroll increments
scrolldelay = setTimeout('startScroll()',50); // scrolls every 100 milliseconds
}
}
function stopScroll()
{
clearTimeout(scrolldelay);
timerIsOn = 0;
}
function resumeScroll()
{
timerIsOn = 1;
startScroll();
}
function getScrollY()
{
var scrOfY = 0;
if( typeof( window.pageYOffset ) == 'number' )
{
//Netscape compliant
scrOfY = window.pageYOffset;
}
else if( document.body && document.body.scrollTop )
{
//DOM compliant
scrOfY = document.body.scrollTop;
}
else if( document.documentElement && document.documentElement.scrollTop )
{
//IE6 standards compliant mode
scrOfY = document.documentElement.scrollTop;
}
return scrOfY;
}
Hey guys I am currently trying to set up a set of <li>'s to act as links just so: Code: <li onmouseover="location='http://www.google.com'">Text</li> Obviously this works fine, however what I need it to do is load in an iframe rather than reloading the browser. So the question is, what code do I need to get target data in to the js? Thanks! I have a img tag but I also added <img src="panada.jpg" onmouseover="alert('$info')"> can you tell me what I'm doing wrong?
|
|||||||