Connecting Tech Pros Worldwide Help | Site Map
bytes > topic > javascript > answers

How to make this code link from 12 images to other sites via mouseover not click??

Newbie
  
Join Date: Sep 2009
Posts: 2
#1: Sep 17 '09
Expand|Select|Wrap|Line Numbers
  1. <!--Force IE6 into quirks mode with this comment tag-->
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  3. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  4.  
  5. <html>
  6.  
  7. <head>
  8.  
  9. <style type="text/css">
  10. a.img-border img, a.img-border:link img{border:12px solid #6040c0;}
  11. </style>
  12.  
  13. </head>
  14.  
  15. <body>
  16.  
  17. <script type="text/javascript" language="JavaScript1.2"> 
  18.  
  19. var sliderwidth=703
  20. var sliderheight=175
  21. var slidespeed=1
  22.  
  23. slidebgcolor= "tan "
  24.  
  25. var leftrightslide=new Array()
  26. var finalslide=''
  27.  
  28. //<a href="xx"onMouseOver="parent.location='http://www.webhome1.com/target="_blank">'">Move ywithout clicking!</a>
  29.  
  30. //<a href="xx"onMouseOver="parent.location='109_RandomBackgroundColor.html'">Move without clicking!</a>
  31.  
  32.  
  33. leftrightslide[0]='<a href="http://www.bartleby.com/people/Cellini.html"; a href="#" class="img-border"><img src="picture_1.jpg" >'  
  34.  
  35. leftrightslide[1]='<a href="http://www.bartleby.com/people/Cellini.html"; a href="#" class="img-border"><img src="picture_2.jpg" alt="">'  
  36.  
  37. leftrightslide[2]='<a href="http://www.bartleby.com/people/Cellini.html"; a href="#" class="img-border"><img src="picture_3.jpg" alt="">' 
  38.  
  39. leftrightslide[3]='<a href="http://www.bartleby.com/people/Cellini.html"; a href="#" class="img-border"><img src="picture_4.jpg" alt="">'  
  40.  
  41. leftrightslide[4]='<a href="http://www.bartleby.com/people/Cellini.html"; a href="#" class="img-border"><img src="picture_5.jpg" alt="">' 
  42.  
  43. leftrightslide[5]='<a href="http://www.bartleby.com/people/Cellini.html"; a href="#" class="img-border"><img src="picture_6.jpg" alt="">'  
  44.  
  45. leftrightslide[6]='<a href="http://www.bartleby.com/people/Cellini.html"; a href="#" class="img-border"><img src="picture_7.jpg" alt="">'  
  46.  
  47. leftrightslide[7]='<a href="http://www.bartleby.com/people/Cellini.html"; a href="#" class="img-border"><img src="picture_8.jpg" alt="">' 
  48.  
  49. leftrightslide[8]='<a href="http://www.bartleby.com/people/Cellini.html"; a href="#" class="img-border"><img src="picture_9.jpg" alt="">' 
  50.  
  51. leftrightslide[9]='<a href="http://www.bartleby.com/people/Cellini.html"; a href="#" class="img-border"><img src="picture_10.jpg" alt="">' 
  52.  
  53. leftrightslide[10]='<a href="http://www.bartleby.com/people/Cellini.html"; a href="#" class="img-border"><img src="picture_11.jpg" alt="">'  
  54.  
  55. leftrightslide[11]='<a href="http://www.bartleby.com/people/Cellini.html"; a href="#" class="img-border"><img src="picture_12.jpg" alt="">'  
  56.  
  57. leftrightslide[12]='<a href="http://www.bartleby.com/people/Cellini.html"; a href="#" class="img-border"><img src="picture_13.jpg" alt="">'  
  58.  
  59. leftrightslide[13]='<a href="http://www.bartleby.com/people/Cellini.html"; a href="#" class="img-border"><img src="picture_14.jpg" alt="">'  
  60.  
  61.  
  62. var copyspeed=slidespeed
  63. leftrightslide='<nobr>'+leftrightslide.join()+'</nobr>'
  64. var iedom=document.all||document.getElementById
  65. if (iedom)
  66. document.write('<span id="temp" style="visibility:hidden;position:absolute;top:-100;left:-600">'+leftrightslide+'</span>')
  67. var actualwidth=''
  68. var cross_slide, ns_slide
  69.  
  70. function fillup(){
  71. if (iedom){
  72. cross_slide=document.getElementById? document.getElementById("test2") : document.all.test2
  73. cross_slide2=document.getElementById? document.getElementById("test3") : document.all.test3
  74. cross_slide.innerHTML=cross_slide2.innerHTML=leftrightslide
  75. actualwidth=document.all? cross_slide.offsetWidth : document.getElementById("temp").offsetWidth
  76. cross_slide2.style.left=actualwidth+20 }
  77.  
  78. else if (document.layers){
  79. ns_slide=document.ns_slidemenu.document.ns_slidemenu2
  80. ns_slide2=document.ns_slidemenu.document.ns_slidemenu3
  81. ns_slide.document.write(leftrightslide)
  82. ns_slide.document.close()
  83. actualwidth=ns_slide.document.width
  84. ns_slide2.left=actualwidth+20
  85. ns_slide2.document.write(leftrightslide)
  86. ns_slide2.document.close()}
  87.  
  88. lefttime=setInterval("slideleft()",30)}
  89.  
  90. window.onload=fillup
  91.  
  92. function slideleft(){
  93. if (iedom){
  94. if (parseInt(cross_slide.style.left)>(actualwidth*(-1)+8))
  95. cross_slide.style.left=parseInt(cross_slide.style.left)-copyspeed
  96. else
  97. cross_slide.style.left=parseInt(cross_slide2.style.left)+actualwidth+30
  98.  
  99. if (parseInt(cross_slide2.style.left)>(actualwidth*(-1)+8))
  100. cross_slide2.style.left=parseInt(cross_slide2.style.left)-copyspeed
  101. else
  102. cross_slide2.style.left=parseInt(cross_slide.style.left)+actualwidth+30}
  103.  
  104. else if (document.layers){
  105. if (ns_slide.left>(actualwidth*(-1)+8))
  106. ns_slide.left-=copyspeed
  107. else
  108. ns_slide.left=ns_slide2.left+actualwidth+30
  109.  
  110. if (ns_slide2.left>(actualwidth*(-1)+8))
  111. ns_slide2.left-=copyspeed
  112. else
  113. ns_slide2.left=ns_slide.left+actualwidth+30}
  114. }
  115.  
  116. if (iedom||document.layers){
  117. with (document){
  118. document.write('<table width="600" border="0" cellspacing="0" cellpadding="0"><td>')
  119. if (iedom){
  120. write('<div style="position:relative;width:'+sliderwidth+';height:'+sliderheight+';overflow:hidden">')
  121. write('<div style="position:absolute;width:'+sliderwidth+';height:'+sliderheight+';background-color:'+slidebgcolor+'" onMouseover="copyspeed=0" onMouseout="copyspeed=slidespeed">')
  122. write('<div id="test2" style="position:absolute;left:260;top:0"></div>')
  123. write('<div id="test3" style="position:absolute;left:-1000;top:0"></div>')
  124. write('</div></div>')}
  125.  
  126. else if (document.layers){
  127. write('<ilayer width='+sliderwidth+' height='+sliderheight+' name="ns_slidemenu" bgColor='+slidebgcolor+'>')
  128. write('<layer name="ns_slidemenu2" left=0 top=0 onMouseover="copyspeed=0" onMouseout="copyspeed=slidespeed"></layer>')
  129. write('<layer name="ns_slidemenu3" left=0 top=0 onMouseover="copyspeed=0" onMouseout="copyspeed=slidespeed"></layer>')
  130. write('</ilayer>')}
  131.  
  132. document.write('</td></table>')}
  133. }
  134. </script>
  135.  
  136. </body>
  137. </html>
Newbie
  
Join Date: Sep 2009
Posts: 2
#2: Sep 17 '09

re: How to make this code link from 12 images to other sites via mouseover not click??

Expand|Select|Wrap|Line Numbers
  1. <!--Force IE6 into quirks mode with this comment tag-->
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  3. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  4.  
  5. <html>
  6.  
  7. <head>
  8.  
  9. <style type="text/css">
  10. a.img-border img, a.img-border:link img{border:12px solid #6040c0;}
  11. </style>
  12.  
  13. </head>
  14.  
  15. <body>
  16.  
  17. <script type="text/javascript" language="JavaScript1.2"> 
  18.  
  19. var sliderwidth=703
  20. var sliderheight=175
  21. var slidespeed=1
  22.  
  23. slidebgcolor= "tan "
  24.  
  25. var leftrightslide=new Array()
  26. var finalslide=''
  27.  
  28. //<a href="xx"onMouseOver="parent.location='http://www.webhome1.com/target="_blank">'">Move ywithout clicking!</a>
  29.  
  30. //<a href="xx"onMouseOver="parent.location='109_RandomBackgroundColor.html'">Move without clicking!</a>
  31.  
  32.  
  33. leftrightslide[0]='<a href="http://www.bartleby.com/people/Cellini.html"; a href="#" class="img-border"><img src="picture_1.jpg" >'  
  34.  
  35. leftrightslide[1]='<a href="http://www.bartleby.com/people/Cellini.html"; a href="#" class="img-border"><img src="picture_2.jpg" alt="">'  
  36.  
  37. leftrightslide[2]='<a href="http://www.bartleby.com/people/Cellini.html"; a href="#" class="img-border"><img src="picture_3.jpg" alt="">' 
  38.  
  39. leftrightslide[3]='<a href="http://www.bartleby.com/people/Cellini.html"; a href="#" class="img-border"><img src="picture_4.jpg" alt="">'  
  40.  
  41. leftrightslide[4]='<a href="http://www.bartleby.com/people/Cellini.html"; a href="#" class="img-border"><img src="picture_5.jpg" alt="">' 
  42.  
  43. leftrightslide[5]='<a href="http://www.bartleby.com/people/Cellini.html"; a href="#" class="img-border"><img src="picture_6.jpg" alt="">'  
  44.  
  45. leftrightslide[6]='<a href="http://www.bartleby.com/people/Cellini.html"; a href="#" class="img-border"><img src="picture_7.jpg" alt="">'  
  46.  
  47. leftrightslide[7]='<a href="http://www.bartleby.com/people/Cellini.html"; a href="#" class="img-border"><img src="picture_8.jpg" alt="">' 
  48.  
  49. leftrightslide[8]='<a href="http://www.bartleby.com/people/Cellini.html"; a href="#" class="img-border"><img src="picture_9.jpg" alt="">' 
  50.  
  51. leftrightslide[9]='<a href="http://www.bartleby.com/people/Cellini.html"; a href="#" class="img-border"><img src="picture_10.jpg" alt="">' 
  52.  
  53. leftrightslide[10]='<a href="http://www.bartleby.com/people/Cellini.html"; a href="#" class="img-border"><img src="picture_11.jpg" alt="">'  
  54.  
  55. leftrightslide[11]='<a href="http://www.bartleby.com/people/Cellini.html"; a href="#" class="img-border"><img src="picture_12.jpg" alt="">'  
  56.  
  57. leftrightslide[12]='<a href="http://www.bartleby.com/people/Cellini.html"; a href="#" class="img-border"><img src="picture_13.jpg" alt="">'  
  58.  
  59. leftrightslide[13]='<a href="http://www.bartleby.com/people/Cellini.html"; a href="#" class="img-border"><img src="picture_14.jpg" alt="">'  
  60.  
  61.  
  62. var copyspeed=slidespeed
  63. leftrightslide='<nobr>'+leftrightslide.join()+'</nobr>'
  64. var iedom=document.all||document.getElementById
  65. if (iedom)
  66. document.write('<span id="temp" style="visibility:hidden;position:absolute;top:-100;left:-600">'+leftrightslide+'</span>')
  67. var actualwidth=''
  68. var cross_slide, ns_slide
  69.  
  70. function fillup(){
  71. if (iedom){
  72. cross_slide=document.getElementById? document.getElementById("test2") : document.all.test2
  73. cross_slide2=document.getElementById? document.getElementById("test3") : document.all.test3
  74. cross_slide.innerHTML=cross_slide2.innerHTML=leftrightslide
  75. actualwidth=document.all? cross_slide.offsetWidth : document.getElementById("temp").offsetWidth
  76. cross_slide2.style.left=actualwidth+20 }
  77.  
  78. else if (document.layers){
  79. ns_slide=document.ns_slidemenu.document.ns_slidemenu2
  80. ns_slide2=document.ns_slidemenu.document.ns_slidemenu3
  81. ns_slide.document.write(leftrightslide)
  82. ns_slide.document.close()
  83. actualwidth=ns_slide.document.width
  84. ns_slide2.left=actualwidth+20
  85. ns_slide2.document.write(leftrightslide)
  86. ns_slide2.document.close()}
  87.  
  88. lefttime=setInterval("slideleft()",30)}
  89.  
  90. window.onload=fillup
  91.  
  92. function slideleft(){
  93. if (iedom){
  94. if (parseInt(cross_slide.style.left)>(actualwidth*(-1)+8))
  95. cross_slide.style.left=parseInt(cross_slide.style.left)-copyspeed
  96. else
  97. cross_slide.style.left=parseInt(cross_slide2.style.left)+actualwidth+30
  98.  
  99. if (parseInt(cross_slide2.style.left)>(actualwidth*(-1)+8))
  100. cross_slide2.style.left=parseInt(cross_slide2.style.left)-copyspeed
  101. else
  102. cross_slide2.style.left=parseInt(cross_slide.style.left)+actualwidth+30}
  103.  
  104. else if (document.layers){
  105. if (ns_slide.left>(actualwidth*(-1)+8))
  106. ns_slide.left-=copyspeed
  107. else
  108. ns_slide.left=ns_slide2.left+actualwidth+30
  109.  
  110. if (ns_slide2.left>(actualwidth*(-1)+8))
  111. ns_slide2.left-=copyspeed
  112. else
  113. ns_slide2.left=ns_slide.left+actualwidth+30}
  114. }
  115.  
  116. if (iedom||document.layers){
  117. with (document){
  118. document.write('<table width="600" border="0" cellspacing="0" cellpadding="0"><td>')
  119. if (iedom){
  120. write('<div style="position:relative;width:'+sliderwidth+';height:'+sliderheight+';overflow:hidden">')
  121. write('<div style="position:absolute;width:'+sliderwidth+';height:'+sliderheight+';background-color:'+slidebgcolor+'" onMouseover="copyspeed=0" onMouseout="copyspeed=slidespeed">')
  122. write('<div id="test2" style="position:absolute;left:260;top:0"></div>')
  123. write('<div id="test3" style="position:absolute;left:-1000;top:0"></div>')
  124. write('</div></div>')}
  125.  
  126. else if (document.layers){
  127. write('<ilayer width='+sliderwidth+' height='+sliderheight+' name="ns_slidemenu" bgColor='+slidebgcolor+'>')
  128. write('<layer name="ns_slidemenu2" left=0 top=0 onMouseover="copyspeed=0" onMouseout="copyspeed=slidespeed"></layer>')
  129. write('<layer name="ns_slidemenu3" left=0 top=0 onMouseover="copyspeed=0" onMouseout="copyspeed=slidespeed"></layer>')
  130. write('</ilayer>')}
  131.  
  132. document.write('</td></table>')}
  133. }
  134. </script>
  135.  
  136. </body>
  137. </html>
Attached Images
     
acoder's Avatar
Site Moderator
  
Join Date: Nov 2006
Location: UK
Posts: 14,581
#3: Sep 17 '09

re: How to make this code link from 12 images to other sites via mouseover not click??

Did you write this yourself? If not, I would suggest that you get a more, modern version which does exactly what you require, or gives you the option to do so, or is easily configurable. The code you've posted is terribly out of date.
Reply

« previous question | next question »

Similar JavaScript / Ajax / DHTML bytes

/bytes/development

/bytes/it

/bytes/about

We are a network of experts and professionals in IT and software development that help one another with answers to tough questions and share insights. Get the best answers to your questions from over 226,223 network members.

dev questions:
algorithms | asp | asp.net | c/c++ | coldfusion | c# | flash | html/css | java | javascript |
mobile dev | .net | perl | php | python | ruby | software dev | vb.net | visual basic | xml
it questions:
access | apache | careers | db2 | iis | macosx | mysql | networking | oracle | postgresql | sql server | unix | windows

About Bytes | Copyright 1995-2009 BYTES. All rights Reserved