|
JavaScript - Multiple Popovers On Image Map
I am new to web design and purchased "Instant PopOver" thinking it would do all the javascripting for me, BUT it doesn't combine the popovers in a single document and their customer service doesn't provide custom coding help. I must not be scripting this right. Here's what I'm working on:
http://www.hallornothingdesigns.com/...ew/map_pop.htm The popovers are suppose to all be unique in different locations. Can someone help me? My butchered code is below: 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>
<!-- IPO CODE: ALBOX START -->
<script language="javascript">
function showAlert1() {makeAlert('Discover','<iframe id="aliframe" src=http://www.hallornothingdesigns.com/GrandeVillas_Preview/discover.html width=97% height=150 frameborder=0 scrolling=no></iframe>\n',0,50,3,'#0000FF');}
function showAlert2() {makeAlert('Hang','<iframe id="aliframe" src=http://www.hallornothingdesigns.com/GrandeVillas_Preview/hang.html width=97% height=150 frameborder=0 scrolling=no></iframe>\n',0,50,3,'#0000FF');}
function showAlert3() {makeAlert('Encounter','<iframe id="aliframe" src=http://www.hallornothingdesigns.com/GrandeVillas_Preview/encounter.html width=97% height=150 frameborder=0 scrolling=no></iframe>\n',0,50,3,'#0000FF');}
function showAlert4() {makeAlert('Challenge','<iframe id="aliframe" src=http://www.hallornothingdesigns.com/GrandeVillas_Preview/challenge.html width=97% height=150 frameborder=0 scrolling=no></iframe>\n',0,50,3,'#0000FF');}
function showAlert5() {makeAlert('Explore','<iframe id="aliframe" src=http://www.hallornothingdesigns.com/GrandeVillas_Preview/explore.html width=97% height=150 frameborder=0 scrolling=no></iframe>\n',0,50,3,'#0000FF');}
function showAlert6() {makeAlert('Behold','<iframe id="aliframe" src=http://www.hallornothingdesigns.com/GrandeVillas_Preview/behold.html width=97% height=150 frameborder=0 scrolling=no></iframe>\n',0,50,3,'#0000FF');}
function showAlert7() {makeAlert('Send','<iframe id="aliframe" src=http://www.hallornothingdesigns.com/GrandeVillas_Preview/send.html width=97% height=150 frameborder=0 scrolling=no></iframe>\n',0,50,3,'#0000FF');}
function showAlert8() {makeAlert('Take','<iframe id="aliframe" src=http://www.hallornothingdesigns.com/GrandeVillas_Preview/take.html width=97% height=150 frameborder=0 scrolling=no></iframe>\n',0,50,3,'#0000FF');}
function showAlert9() {makeAlert('Conquer','<iframe id="aliframe" src=http://www.hallornothingdesigns.com/GrandeVillas_Preview/conquer.html width=97% height=150 frameborder=0 scrolling=no></iframe>\n',0,50,3,'#0000FF');}
function showAlert10() {makeAlert('Seize','<iframe id="aliframe" src=http://www.hallornothingdesigns.com/GrandeVillas_Preview/seize.html width=97% height=150 frameborder=0 scrolling=no></iframe>\n',0,50,3,'#0000FF');}
</script>
<!-- IPO CODE: ALBOX END -->
<title>Grande Villas Spinnakers Kids' Club</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<!--Fireworks CS3 Dreamweaver CS3 target. Created Sun Dec 20 18:18:27 GMT-0500 (EST) 2009-->
</head>
<body bgcolor="#74b1bf" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<script language="javascript" src="AlertPopOVER.js"></script>
<img name="map_background2" src="map_background2.gif" width="1500" height="864" border="0" id="map_background2" usemap="#m_map_background2" alt="" /><map name="m_map_background2" id="m_map_background2">
<area shape="rect" coords="844,449,1028,535" href="http://www.gvcondos.com" target="_blank" title="Grande Villas Homepage" alt="Grande Villas Homepage" />
<area shape="rect" coords="525,195,597,216" href='javascript:void(0);' onClick="javascript:showAlert1();">
<area shape="rect" coords="944,201,989,223" href='javascript:void(0);' onClick="javascript:showAlert2();">
<area shape="rect" coords="716,239,798,257" href='javascript:void(0);' onClick="javascript:showAlert3();">
<area shape="rect" coords="509,332,591,351" href='javascript:void(0);' onClick="javascript:showAlert4();">
<area shape="rect" coords="723,365,792,384" href='javascript:void(0);' onClick="javascript:showAlert5();">
<area shape="rect" coords="856,324,919,343" href='javascript:void(0);' onClick="javascript:showAlert6();">
<area shape="rect" coords="958,373,1000,394" href='javascript:void(0);' onClick="javascript:showAlert7();">
<area shape="rect" coords="824,427,868,446" href='javascript:void(0);' onClick="javascript:showAlert8();">
<area shape="rect" coords="648,518,695,535" href='javascript:void(0);' onClick="javascript:showAlert9();">
<area shape="rect" coords="497,449,562,468" href='javascript:void(0);' onClick="javascript:showAlert10();">
</map>
<!-- IPO CODE: ALBOX START -->
<div id="stl_alert1" style="position: absolute; visibility: hidden;
left: 527px;
top: 215px;
width: 270px;
height: 150px;
border: 1px solid #330E00;
background-color: #FFFFFF"
>
<div align=right>
<font face=Tahoma size=1><a href='javascript:void(0);' onClick="hideAlert()">close</a></font>
</div>
<font face=Verdana size=12><iframe id="aliframe" src=http://www.hallornothingdesigns.com/GrandeVillas_Preview/discover.html width=97% height=150 frameborder=0 scrolling=no></iframe></font>
</div>
<div id="stl_alert2" style="position: absolute; visibility: hidden;
left: 945px;
top: 221px;
width: 270px;
height: 150px;
border: 1px solid #330E00;
background-color: #FFFFFF"
>
<div align=right>
<font face=Tahoma size=1><a href='javascript:void(0);' onClick="hideAlert()">close</a></font>
</div>
<font face=Verdana size=12><iframe id="aliframe" src=http://www.hallornothingdesigns.com/GrandeVillas_Preview/hang.html width=97% height=150 frameborder=0 scrolling=no></iframe></font>
</div>
<div id="stl_alert3" style="position: absolute; visibility: hidden;
left: 717px;
top: 258px;
width: 270px;
height: 150px;
border: 1px solid #330E00;
background-color: #FFFFFF"
>
<div align=right>
<font face=Tahoma size=1><a href='javascript:void(0);' onClick="hideAlert()">close</a></font>
</div>
<font face=Verdana size=12><iframe id="aliframe" src=http://www.hallornothingdesigns.com/GrandeVillas_Preview/encounter.html width=97% height=150 frameborder=0 scrolling=no></iframe></font>
</div>
<div id="stl_alert4" style="position: absolute; visibility: hidden;
left: 511px;
top: 350px;
width: 270px;
height: 150px;
border: 1px solid #330E00;
background-color: #FFFFFF"
>
<div align=right>
<font face=Tahoma size=1><a href='javascript:void(0);' onClick="hideAlert()">close</a></font>
</div>
<font face=Verdana size=12><iframe id="aliframe" src=http://www.hallornothingdesigns.com/GrandeVillas_Preview/challenge.html width=97% height=150 frameborder=0 scrolling=no></iframe></font>
</div>
<div id="stl_alert5" style="position: absolute; visibility: hidden;
left: 727px;
top: 295px;
width: 270px;
height: 150px;
border: 1px solid #330E00;
background-color: #FFFFFF"
>
<div align=right>
<font face=Tahoma size=1><a href='javascript:void(0);' onClick="hideAlert()">close</a></font>
</div>
<font face=Verdana size=12><iframe id="aliframe" src=http://www.hallornothingdesigns.com/GrandeVillas_Preview/explore.html width=97% height=150 frameborder=0 scrolling=no></iframe></font>
</div>
<div id="stl_alert6" style="position: absolute; visibility: hidden;
left: 859px;
top: 344px;
width: 270px;
height: 150px;
border: 1px solid #330E00;
background-color: #FFFFFF"
>
<div align=right>
<font face=Tahoma size=1><a href='javascript:void(0);' onClick="hideAlert()">close</a></font>
</div>
<font face=Verdana size=12><iframe id="aliframe" src=http://www.hallornothingdesigns.com/GrandeVillas_Preview/behold.html width=97% height=150 frameborder=0 scrolling=no></iframe></font>
</div>
<div id="stl_alert7" style="position: absolute; visibility: hidden;
left: 957px;
top: 393px;
width: 270px;
height: 150px;
border: 1px solid #330E00;
background-color: #FFFFFF"
>
<div align=right>
<font face=Tahoma size=1><a href='javascript:void(0);' onClick="hideAlert()">close</a></font>
</div>
<font face=Verdana size=12><iframe id="aliframe" src=http://www.hallornothingdesigns.com/GrandeVillas_Preview/send.html width=97% height=150 frameborder=0 scrolling=no></iframe></font>
</div>
<div id="stl_alert8" style="position: absolute; visibility: hidden;
left: 825px;
top: 447px;
width: 270px;
height: 150px;
border: 1px solid #330E00;
background-color: #FFFFFF"
>
<div align=right>
<font face=Tahoma size=1><a href='javascript:void(0);' onClick="hideAlert()">close</a></font>
</div>
<font face=Verdana size=12><iframe id="aliframe" src=http://www.hallornothingdesigns.com/GrandeVillas_Preview/take.html width=97% height=150 frameborder=0 scrolling=no></iframe></font>
</div>
<div id="stl_alert9" style="position: absolute; visibility: hidden;
left: 497px;
top: 470px;
width: 270px;
height: 150px;
border: 1px solid #330E00;
background-color: #FFFFFF"
>
<div align=right>
<font face=Tahoma size=1><a href='javascript:void(0);' onClick="hideAlert()">close</a></font>
</div>
<font face=Verdana size=12><iframe id="aliframe" src=http://www.hallornothingdesigns.com/GrandeVillas_Preview/conquer.html width=97% height=150 frameborder=0 scrolling=no></iframe></font>
</div>
<div id="stl_alert10" style="position: absolute; visibility: hidden;
left: 648px;
top: 538px;
width: 270px;
height: 150px;
border: 1px solid #330E00;
background-color: #FFFFFF"
>
<div align=right>
<font face=Tahoma size=1><a href='javascript:void(0);' onClick="hideAlert()">close</a></font>
</div>
<font face=Verdana size=12><iframe id="aliframe" src=http://www.hallornothingdesigns.com/GrandeVillas_Preview/seize.html width=97% height=150 frameborder=0 scrolling=no></iframe></font>
</div>
<!-- IPO CODE: ALBOX END -->
</body>
</html>
I'd also like these popovers to activate on rollover and close upon mouseout, but I'm trying not to be picky. I'd be happy if I could just get the right content to popup. Thanks for your help!!!! Similar TutorialsHi, I hope someone can help me. I'll be honest and say I don't know much about javascript, but am fairly comfortable in html. I am building a website that will have multiple image swaps on multiple pages. I am building this in wordpress, and I'm guessing that means my approach will be different than if I wasn't using wordpress. Here's how one page would work: There are 10 images shown. 1,2,3,4,5,6,7,8,9,10. When number 1 is clicked on, I want a new image - 1a. When 2 is clicked on, 2a. So there are 20 different images in all on a given page. Also, I want the user to be able to click on the image again to restore the original image. I would prefer onclick to onmouseover. There will be literally dozens of pages like this on the site, managed by wordpress, so hundreds of images to swap. Basically the first image is a question - the second image is the answer. Is this possible? Good morning all. I am looking to have multiple image sliders (javascript / jquery) on one page. I have built the framework and have gotten one slider to work. However, when adding in another slider, I have only confused the situation. Below is the html and css. Let me know where I've gone wrong here. Will I need another set of css classes for each slider? How do I call a second slider? Thanks! The html/javascript Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link media="screen" type="text/css" link rel="stylesheet" href="style.css" />
<link media="screen" type="text/css" link rel="stylesheet" href="stylework.css" />
<link media="screen" link rel="stylesheet" type="text/css" href="wt-scroller.css" />
<link media="screen" link rel="stylesheet" type="text/css" href="wt-lightbox.css" />
<script type="text/javascript" src="js/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.10.custom.min.js"></script>
<script type="text/javascript" src="js/jquery.wt-lightbox.min.js"></script>
<script type="text/javascript" src="js/jquery.wt-scroller.min.js"></script>
<title>idigify</title>
</head>
<body>
<div class="main">
<div class="container">
<div class="header">
<ul class="nav">
<ul>
<div class="allbuttons">
<div class="navabout"><li>about</li></div>
<div class="navwork"><li>work</li></div>
<div class="navcontact"><li>contact</li></div>
</div><!--end of all buttons-->
</ul><!--end of nav list-->
</ul><!--end of nav-->
</div>
<!--end of header-->
<div class="headeraboutme">the work</div>
<div class="sitemainfeature">
<div class="aboutme_text">
<h2>Just for Fun</h2>
<div class="workslider_justforfun">
<div class="workslider_justforfun_container">
<div class="wt-scroller">
<div class="prev-btn"></div>
<div class="slides">
<ul>
<li>
<a href="images/triworks_abstract27.jpg" rel="scroller">
<img src="images/thumbs/triworks_abstract27.jpg"/> </a>
<p> this is just a test.this is just a test.this is just a test.</p>
</li>
<li>
<a href="images/triworks_abstract27.jpg" rel="scroller">
<img src="images/thumbs/triworks_abstract27.jpg"/> </a>
<p> this is just a test.this is just a test.this is just a test.</p>
</li>
<li>
<a href="images/triworks_abstract27.jpg" rel="scroller">
<img src="images/thumbs/triworks_abstract27.jpg"/> </a>
<p> this is just a test.this is just a test.this is just a test.</p>
</li>
</ul>
</div><!--end of slider-->
<div class="next-btn"></div>
<div class="lower-panel">
<div class="scroll-bar">
<div class="thumb">
</div><!--end of thumb-->
</div><!--end of scroll-bar-->
</div><!--end of lower panel-->
</div><!--end of wt scroller just for fun-->
</div><!--end of just for fun container-->
</div><!--end of workslider-->
<h2>Ads/Advertising</h2>
<div class="workslider_justforfun">
<div class="workslider_justforfun_container">
<div class="wt-scroller2">
<div class="prev-btn"></div>
<div class="slides">
<ul>
<li>
<a href="images/triworks_abstract27.jpg" rel="scroller">
<img src="images/thumbs/triworks_abstract27.jpg"/> </a>
<p> this is just a test.this is just a test.this is just a test.</p>
</li>
<li>
<a href="images/triworks_abstract27.jpg" rel="scroller">
<img src="images/thumbs/triworks_abstract27.jpg"/> </a>
<p> this is just a test.this is just a test.this is just a test.</p>
</li>
<li>
<a href="images/triworks_abstract27.jpg" rel="scroller">
<img src="images/thumbs/triworks_abstract27.jpg"/> </a>
<p> this is just a test.this is just a test.this is just a test.</p>
</li>
</ul>
</div><!--end of slider-->
<div class="next-btn"></div>
<div class="lower-panel">
<div class="scroll-bar">
<div class="thumb">
</div><!--end of thumb-->
</div><!--end of scroll-bar-->
</div><!--end of lower panel-->
</div><!--end of wt scroller just for fun-->
</div><!--end of just for fun container-->
</div><!--end of workslider-->
<h2>Logos</h2>
<div class="workslider_justforfun">
<div class="workslider_justforfun_container">
<div class="wt-scroller">
<div class="prev-btn"></div>
<div class="slides">
<ul>
<li>
<a href="images/triworks_abstract27.jpg" rel="scroller">
<img src="images/thumbs/triworks_abstract27.jpg"/> </a>
<p> this is just a test.this is just a test.this is just a test.</p>
</li>
<li>
<a href="images/triworks_abstract27.jpg" rel="scroller">
<img src="images/thumbs/triworks_abstract27.jpg"/> </a>
<p> this is just a test.this is just a test.this is just a test.</p>
</li>
<li>
<a href="images/triworks_abstract27.jpg" rel="scroller">
<img src="images/thumbs/triworks_abstract27.jpg"/> </a>
<p> this is just a test.this is just a test.this is just a test.</p>
</li>
</ul>
</div><!--end of slider-->
<div class="next-btn"></div>
<div class="lower-panel">
<div class="scroll-bar">
<div class="thumb">
</div><!--end of thumb-->
</div><!--end of scroll-bar-->
</div><!--end of lower panel-->
</div><!--end of wt scroller just for fun-->
</div><!--end of just for fun container-->
</div><!--end of workslider-->
<h2>Billboards</h2>
<div class="workslider_billboard">
</div><!--end of workslider-->
<h2>Business Cards</h2>
<div class="workslider_businesscard">
</div><!--end of workslider-->
<h2>Resumes</h2>
<div class="workslider_resume">
</div><!--end of workslider-->
<h2>Sales Pieces</h2>
<div class="workslider_salespiece">
</div><!--end of workslider-->
</div><!--end of about me text-->
</div><!--end of site main feature-->
<div class="worksplash"></div><!--end of background splash-->
</div><!--end of container-->
</div><!--end of main-->
<div class="footercontainer">
<ul class="nav">
<ul>
<div class="navabout"><li>about</li></div>
<div class="navwork"><li>work</li></div>
<div class="navcontact"><li>contact</li></div>
</ul><!--end of nav list-->
</ul><!--end of nav-->
</div>
<!--end of footer container-->
<script type="text/javascript">
$(document).ready(
function() {
//initialize scroller
$(".container").wtScroller({
num_display:3,
slide_width:240,
slide_height:180,
slide_margin:1,
button_width:25,
ctrl_height:15,
margin:1,
auto_scroll:false,
delay:4000,
scroll_speed:1000,
easing:"",
auto_scale:true,
move_one:false,
ctrl_type:"scrollbar",
display_buttons:true,
display_caption:true,
mouseover_caption:false,
caption_align:"bottom",
caption_position:"inside",
cont_nav:true,
shuffle:false
});
//initialize lightbox for scroller
$("a[rel='scroller']").wtLightBox({
rotate:true,
delay:4000,
transition_speed:600,
display_number:true,
display_dbuttons:true,
display_timer:true,
display_caption:true,
caption_align:"bottom",
cont_nav:true,
auto_fit:true,
easing:""
});
}
);
</script>
</body>
</html>
the css Code: .wt-scroller{
position:relative;
display:block;
font-family:Arial,Helvetica,sans-serif;
background-color:#CCCCCC;
width:720px;
height:180px;
}
.wt-scroller .slides{
position:relative;
width:700px;
height:200px;
float:left;
overflow:hidden;
z-index:1;
}
.wt-scroller .slides ul{
list-style:none;
position:relative;
width:999999px;
margin:0px;
padding:0px;
z-index:0;
overflow:hidden;
}
.wt-scroller .slides ul li{
position:relative;
display:block;
float:left;
overflow:hidden;
width:240px;
height:200px;
margin-left:5px;
}
.wt-scroller .slides ul li img{
position:absolute;
top:0;
left:0;
z-index:0;
border:0;
}
.wt-scroller .slides ul li p{
position:absolute;
top:0;
left:0;
z-index:1;
color:#FFF;
font-size:12px;
width:200px;
padding:5px;
margin:0;
visibility:hidden;
}
.wt-scroller .outside{
background-color:#222;
}
.wt-scroller .inside{
-ms-filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#BF000000,endColorstr=#BF000000);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#BF000000,endColorstr=#BF000000);
background-color:rgba(0,0,0,0.75);
}
.wt-scroller .prev-btn{
float:left;
position:relative;
width:20px;
height:170px;
cursor:pointer;
}
.wt-scroller .next-btn{
float:right;
position:relative;
width:20px;
height:170px;
cursor:pointer;
}
.wt-scroller .prev-btn{
background:url(assets/prev.png) center no-repeat;
}
.wt-scroller .next-btn{
background:url(assets/next.png) center no-repeat;
}
.wt-scroller .lower-panel{
display:block;
position:relative;
clear:both;
text-align:center;
font-size:0;
}
.wt-scroller .scroll-bar{
position:relative;
background-color:#999;
background:-moz-linear-gradient(top, #999 0%, #666 100%);
background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#999), color-stop(100%,#666));
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#999999', endColorstr='#666666', GradientType=0);
-moz-border-radius:2px;
-webkit-border-radius:2px;
border-radius:2px;
width:100%;
height:5px;
cursor:pointer;
overflow:hidden;
}
.wt-scroller .thumb{
position:absolute;
top:0;
left:0;
width:100px;
height:5px;
-moz-border-radius:2px;
-webkit-border-radius:2px;
border-radius:2px;
background-color:#FFF;
background:-moz-linear-gradient(top, #FFF 0%, #CCC 100%);
background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFF), color-stop(100%,#CCC));
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFF', endColorstr='#CCCCCC', GradientType=0);
}
.wt-scroller .index,
.wt-scroller .index-hl{
position:relative;
display:inline-block;
width:7px;
height:7px;
margin:0 4px;
background-image:url(assets/circle.png);
background-repeat:no-repeat;
}
.wt-scroller .index{
background-position:0 0;
cursor:pointer;
}
.wt-scroller .index-hl{
background-position:-7px 0;
cursor:default;
}
/*start of scroller2 */
.wt-scroller2{
position:relative;
display:block;
font-family:Arial,Helvetica,sans-serif;
background-color:#CCCCCC;
width:720px;
height:180px;
}
.wt-scroller2 .slides{
position:relative;
width:700px;
height:200px;
float:left;
overflow:hidden;
z-index:1;
}
.wt-scroller2 .slides ul{
list-style:none;
position:relative;
width:999999px;
margin:0px;
padding:0px;
z-index:0;
overflow:hidden;
}
.wt-scroller2 .slides ul li{
position:relative;
display:block;
float:left;
overflow:hidden;
width:240px;
height:200px;
margin-left:5px;
}
.wt-scroller2 .slides ul li img{
position:absolute;
top:0;
left:0;
z-index:0;
border:0;
}
.wt-scroller2 .slides ul li p{
position:absolute;
top:0;
left:0;
z-index:1;
color:#FFF;
font-size:12px;
width:200px;
padding:5px;
margin:0;
visibility:hidden;
}
.wt-scroller2 .outside{
background-color:#222;
}
.wt-scroller2 .inside{
-ms-filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#BF000000,endColorstr=#BF000000);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#BF000000,endColorstr=#BF000000);
background-color:rgba(0,0,0,0.75);
}
.wt-scroller2 .prev-btn{
float:left;
position:relative;
width:20px;
height:170px;
cursor:pointer;
}
.wt-scroller2 .next-btn{
float:right;
position:relative;
width:20px;
height:170px;
cursor:pointer;
}
.wt-scroller2 .prev-btn{
background:url(assets/prev.png) center no-repeat;
}
.wt-scroller .next-btn{
background:url(assets/next.png) center no-repeat;
}
.wt-scroller2 .lower-panel{
display:block;
position:relative;
clear:both;
text-align:center;
font-size:0;
}
.wt-scroller2 .scroll-bar{
position:relative;
background-color:#999;
background:-moz-linear-gradient(top, #999 0%, #666 100%);
background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#999), color-stop(100%,#666));
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#999999', endColorstr='#666666', GradientType=0);
-moz-border-radius:2px;
-webkit-border-radius:2px;
border-radius:2px;
width:100%;
height:5px;
cursor:pointer;
overflow:hidden;
}
.wt-scroller2 .thumb{
position:absolute;
top:0;
left:0;
width:100px;
height:5px;
-moz-border-radius:2px;
-webkit-border-radius:2px;
border-radius:2px;
background-color:#FFF;
background:-moz-linear-gradient(top, #FFF 0%, #CCC 100%);
background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFF), color-stop(100%,#CCC));
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFF', endColorstr='#CCCCCC', GradientType=0);
}
.wt-scroller2 .index,
.wt-scroller2 .index-hl{
position:relative;
display:inline-block;
width:7px;
height:7px;
margin:0 4px;
background-image:url(assets/circle.png);
background-repeat:no-repeat;
}
.wt-scroller2 .index{
background-position:0 0;
cursor:pointer;
}
.wt-scroller2 .index-hl{
background-position:-7px 0;
cursor:default;
}
/*end of scroller2 */
http://www.pennonconstruction.com/projects.php I'm trying to rotate an array of images (including different urls the images are linked to). The two images below "Featured Projects" are the images that should be rotating with an array of different images/links. I know this can be done in a fairly simple way, I'm just having a hard time finding something that is simple and works. Any help is much appreciated! Hi, I have a list of pictures like this: <a href="javascript:void(0);" onclick="ajax_loadContent('shop_page1','shop_akcija_page.php?cat=1&pic=1474');return false"><img src="image.php?path=source/shoes/0788.jpg" class="img" border="0"></a> <a href="javascript:void(0);" onclick="ajax_loadContent('shop_page1','shop_akcija_page.php?cat=1&pic=1440');return false"><img src="image.php?path=source/shoes/0754.jpg" class="img" border="0"></a> <a href="javascript:void(0);" onclick="ajax_loadContent('shop_page1','shop_akcija_page.php?cat=1&pic=1430');return false"><img src="image.php?path=source/shoes/0744.jpg" class="img" border="0"></a> <a href="javascript:void(0);" onclick="ajax_loadContent('shop_page1','shop_akcija_page.php?cat=54&pic=1407');return false"><img src="image.php?path=source/shoes/0127.jpg" class="img" border="0"></a> <a href="javascript:void(0);" onclick="ajax_loadContent('shop_page1','shop_akcija_page.php?cat=18&pic=1390');return false"><img src="image.php?path=source/shoes/0106.jpg" class="img" border="0"></a> Size of pictures in class is width 155px and hight 175px. Now I want, when I click on any picture from the list, to replace class "img" on all pictures with new class that have width 100px and height 75px. Is this possible? Thanks Hello, I have 3 smaller thumbnail images and when I click on any of them, the resulting image displays in the larger image space. The tricky part is that I want the larger image to become a link that changes, depending on which image is displaying. (I don't want the little images to be links.) Click here for a visual to help explain what I am wanting to do. Here is what I have for script...but I can't figure out the links... Code: <script>
function changeImage(filename)
{
document.main.src = filename;
}
</script>
<table><tr><td><img name="main" src="images/4.gif"></td>
<td>
<a href="#" onClick="javascript:changeImage('images/1.gif')"><img src="images/11.gif"></a><br>
<a href="#" onClick="javascript:changeImage('images/2.gif')"><img src="images/22.gif"></a><br>
<a href="#" onClick="javascript:changeImage('images/3.gif')"><img src="images/33.gif"></a><br>
</td></tr></table>
This script works fine, but I can't figure out how to make the larger image have 3 separate links, depending on which image is displaying in it. Thanks for any help you can be! I'm trying to create a portfolio website in which I have multiple galleries showing different work on the same page . Each to work separately and change the default image on click. I have seen it work he http://www.fajnechlopaki.com/ I was able to follow this: http://codingforums.com/showthread.php?p=941419 but then couldn't duplicate it. Please help! Thanks. hi im creating a simple slide show and i was wondering how to add multiple sets of image. heres my current code Code:
<html>
<head>
<script type="text/javascript">
var Images = new Array
('images/up.jpg','images/right.jpg','images/down.jpg','images/left.jpg');
//my second group of images...
//('images/bottemleft.jpg','images/topleft.jpg','images/centerstep.jpg','images/topleft.jpg','images/bottemright.jpg');
var thisPic = 0;
function initLinks() {
document.getElementById("nextLink").onclick = processNext;
document.getElementById("backlink").onclick = processBack;
document.getElementById("fplaylink").onclick = processfplay;
document.getElementById("bplaylink").onclick = processbplay;
document.getElementById("stoplink").onclick = processstop;
}
function processNext() {
thisPic++;
if (thisPic == Images.length) {
thisPic = 0;
}
document.getElementById("myPicture").src = Images[thisPic];
return false;
}
function processBack() {
thisPic--;
if (thisPic == -1 ) {
thisPic = (Images.length -1);
}
document.getElementById("myPicture").src = Images[thisPic];
return false;
}
var stop = 0
function processfplay() {
if (stop == 1) {
thisPic++;
if (thisPic == Images.length) {
thisPic = 0;
}
setTimeout("processfplay()", 200);
}
else {
stop = 1 ;
}
document.getElementById("myPicture").src = Images[thisPic];
return false;
}
function processbplay() {
if (stop == 2) {
thisPic--;
if (thisPic == -1 ) {
thisPic = (Images.length -1);
}
setTimeout("processbplay()", 200);
}
else {
stop = 2;
}
document.getElementById("myPicture").src = Images[thisPic];
return false;
}
function processstop (){
(stop = 0)
document.getElementById("myPicture").src = Images[thisPic];
return false;
}
</script>
</head>
<body onload=initLinks() >
<h2 align= center>Images used in the slideshow below</h2>
<table align= center>
<tr><td><img src= "images/left.jpg"></td><td><img src= "images/down.jpg"></td>
<td><img src= "images/up.jpg"></td><td><img src= "images/right.jpg"></td></tr>
</table>
<table align= center>
<td><img src= "images/bottemleft.jpg"></td><td><img src= "images/topleft.jpg"></td>
<td><img src= "images/centerstep.jpg"></td>
<td><img src= "images/topright.jpg"></td><td><img src= "images/bottemright.jpg"></td>
</table>
<div align="center">
<h2>The Slidshow</h2>
<img src="images/ddrlogo.jpg" id="myPicture" alt="Slideshow" />
<h2>
<a href="any_old.html" id="nextLink">Next >></a><br/>
<a href="any_old.html" id="backlink">Back <<</a><br/>
<a href="any_old.html" id="fplaylink">Forward Play <<</a><br/>
<a href="any_old.html" id="bplaylink">backward Play <<</a><br/>
<a href="any_old.html" id="stoplink">Stop <<</a><br/>
</h2>
</div>
</body>
</html>
thanx in advance Hi I implemented some coding tor create a random image on the page with a corresponding 'alt' tag and all was fine for a while... Then I got ambitions and modified the script to generate code that would generate two seperate sets of random image and associated 'alt' tag pairs.... and all seemed fine for a while.... ... however after having used the code on my page for a while I notice that occasionally I get a broken file link to the image which then fails to show... and shows the 'alt' text of "undefined". All the code links to images are correct and all images DO show from time to time with the tags.... only occasionally this extra blank/undefined pair is generated. Anyone have any ideas? Here's the code... Code: <SCRIPT LANGUAGE="JavaScript">
<!-- Begin
// Set up the image files to be used.
var theImages = new Array() // do not change this
// To add more image files, continue with the
// pattern below, adding to the array.
theImages[0] = 'images/240 Images/belmarsh-peat-240.jpg'
theImages[1] = 'images/240 Images/98-florence-rd-maidstone240.jpg'
theImages[2] = 'images/240 Images/boxgrove-biface-240.jpg'
theImages[3] = 'images/240 Images/Fieldwalking2-240.jpg'
theImages[4] = 'images/240 Images/Hawkinge-Pot-240.jpg'
theImages[5] = 'images/240 Images/Justin_Barton-240.jpg'
theImages[6] = 'images/240 Images/StaffPages/Hadrians-Wall.jpg'
theImages[7] = 'images/240 Images/Chilley_Farm_Pevensey240.jpg'
// do not edit anything below this line
var theImages2 = new Array() // do not change this
// To add more image files, continue with the
// pattern below, adding to the array.
theImages2[0] = 'images/LeafletImages/Fronts/Building/Building4.jpg'
theImages2[1] = 'images/LeafletImages/Fronts/Fieldwork/Fieldwork4.jpg'
theImages2[2] = 'images/LeafletImages/Fronts/Finds/Finds4.jpg'
theImages2[3] = 'images/LeafletImages/Fronts/Forensic/Forensic4.jpg'
theImages2[4] = 'images/LeafletImages/Fronts/GeoArch/GeoArch4.jpg'
theImages2[5] = 'images/LeafletImages/Fronts/Heritage/Heritage4.jpg'
theImages2[6] = 'images/LeafletImages/Fronts/Landscape/Landscape4.jpg'
// do not edit anything below this line
var theAlts = new Array() // do not change this
// To add more image files, continue with the
// pattern below, adding to the array.
theAlts[0] = 'Peat bog excavations at Belmarsh Prison.'
theAlts[1] = 'An archaeological watching brief underway in Maidstone, Kent.'
theAlts[2] = 'A flint biface hand-axe the from Boxgrove excavations, West Sussex.'
theAlts[3] = 'Fieldwalking.'
theAlts[4] = 'Excavation of a cremation urn at Hawkinge, Kent.'
theAlts[5] = 'An MA Student from University College London a records ceramic vessel.'
theAlts[6] = 'The Hadrian’s Wall Management plan was prepared in consultation with Archaeology South-East (Copyright - Image by Simon Warner).'
theAlts[7] = 'Historic Building Recording at Chilley Farm, Pevensey.'
var theAlts2 = new Array() // do not change this
// To add more image files, continue with the
// pattern below, adding to the array.
theAlts2[0] = 'Building Recording Services.'
theAlts2[1] = 'Fieldwork Services.'
theAlts2[2] = 'Finds and Environmental Specialist Services.'
theAlts2[3] = 'Forensic Archaeology.'
theAlts2[4] = 'Geoarchaeological Services.'
theAlts2[5] = 'Heritage Management Services.'
theAlts2[6] = 'Landscape Research Services.'
var j = 0
var p = theImages.length;
var preBuffer = new Array()
for (i = 0; i < p; i++){
preBuffer[i] = new Image()
preBuffer[i].src = theImages[i]
}
var whichImage = Math.round(Math.random()*(p-1));
function showImage(){
document.write('<img src="'+theImages[whichImage]+'" border="1" alt="'+theAlts[whichImage]+'">');
}
function showImage2(){
document.write('<img src="'+theImages2[whichImage]+'" border="0" alt="'+theAlts2[whichImage]+'">');
}
// End -->
</script>
and its called by the code... Code: <SCRIPT LANGUAGE="JavaScript"> <!-- Begin showImage(); // End --> </script> and.. Code: <SCRIPT LANGUAGE="JavaScript"> <!-- Begin showImage2(); // End --> </script> Many thanks in advance. hi master. I need some help. I need a function that change multiple images on click maybe by id Ex.: PHP Code: <table> ..... <td><img src="folder1/image1.jpg"></td> <td><img src="folder1/image2.jpg"></td> <td><img src="folder1/image3.jpg"></td> <td><img src="folder2/image1.jpg"></td> <td><img src="folder2/image2.jpg"></td> <td><img src="folder2/image3.jpg"></td> ..... </table> NOW BUTTONS (IMAGES) PHP Code: <!-- clicking this imagen will change to another button image and will change the folder1/image1.jpg and folder2/image1.jpg --> <div><img src="buttons/buton1.jpg" alt=""></div> <!-- clicking this imagen will change to another button image and will change the folder1/image2.jpg and folder2/image2.jpg --> <div><img src="buttons/buton1.jpg" alt=""></div> <div><img src="buttons/buton2.jpg" alt="click here to change only the image1.jpg in folder1, folder2 and this image"></div> <!-- clicking this imagen will change to another button image and will change the folder1/image3.jpg and folder2/image3.jpg --> <div><img src="buttons/buton3.jpg" alt="click here to change only the image1.jpg in folder1, folder2 and this image"></div> really, I don't know much about javascript, I'm waiting for your help. actually, I have loaded jquery-1.2.6.min.js I cannot get this function to work properly. Any help would be appreciated, please understand i am not so good at scripting i am trying to check the source of multiple images in one if statement to run a sound. Code: function victory() {
if (document.getElementById("Image0").src == "0.jpg" +
document.getElementById("Image1").src == "1.jpg" +
document.getElementById("Image2").src == "2.jpg" +
document.getElementById("Image3").src == "3.jpg" +
document.getElementById("Image4").src == "4.jpg" +
document.getElementById("Image5").src == "5.jpg" +
document.getElementById("Image6").src == "6.jpg" +
document.getElementById("Image7").src == "7.jpg" +
document.getElementById("Image8").src == "8.jpg" +
document.getElementById("Image9").src == "9.jpg")
{
document.getElementById("vic").currentTime = 0;
document.getElementById("vic").play();
}
else{
}
}
Reply With Quote 01-21-2015, 05:19 PM #2 Dormilich View Profile View Forum Posts Senior Coder Join Date Jan 2010 Location Behind the Wall Posts 3,532 Thanks 13 Thanked 372 Times in 368 Posts + is the addition, concatenation and number casting operator. the logical AND operator is &&. cf. https://developer.mozilla.org/en-US/..._and_Operators I'm trying to create two array's on this page: http://www.hollywoodfarmer.com Both array's would be activated by clicking their respective links -- the "I've got more to say" graphic would activate the text array in the bubble. The "Meet my friends" graphic would activate the image array that changes the picture of the celebrities (pls ignore the terrible formatting of the 2nd pic). I'm going to have a relatively large amount of text array variables and probably 5-10 image array variables. Currently, the meet my friends button changes one image, but then it won't change back and is basically broken. The text array is currently activated by refreshing the page and I can't get that button to work at all. Any help would be greatly appreciated. Your forums have gotten me this far! I need a script that will allow a user to select a vertical selection and Horizontal selection that displays a corresponding image. There are only 8 combinations (4 vertical choices and 2 horizontal choices) I just need to display the correct image and a description. There has to be only one of each selected and only display one image. I have tried several and have had no luck. Any ideas? Here is how the layout will look Hello, I just joined the forum. I'm hoping someone could help me out or point me in the right direction. I am trying to set up a simple interaction for users. The user would be required to select a width then height from two separate drop down menus. I used this as an example to work from: http://www.w3.org/TR/WCAG20-TECHS/wo...dynselect.html The list of heights would not be available until the user selects a width.(similar to the example link above). Each width would have slightly different heights associated with it. After the user selects a width then height an image would be displayed based on that combination. So for example if the user selects 12w/30h they would see "01.jpg" if the user selects 12w/36h they would see "02.jpg". This would all be done on the same page. The user should be able to update the image by combining the different width/height options indefinitely. If anyone has a link to an example or can provide a basic structure I could build of off I would be extremely grateful, thanks. So I want to swap an image when it's clicked on (and then swaps right back after release) and currently I have working code for this, HOWEVER (and the reason for my post) I want this to be a redundant image, so it would be the same image used about 25 times on the page (same image, with same image swap effect) it's basically a download button then slightly changes it's style when clicked on. The problem is that my current code requires me to give each image it's own specific id / name and I have to recreate more sript code for each image id as well. The following example code would be what is currently required for just 2 images (they are the exact same image with exact same swap) but as you can see for every additional download button on the page I have to add a new id for it and a bunch of additional code, so it's quite ridiculous as to how much code is required for 25 of the exact same images on the page. in the header I have: Code: <script language="JavaScript">
<!--
// PRELOADING IMAGES
if (document.images) {
downloadbtn_down=new Image(); downloadbtn_down.src="images/download_pressed.png";
downloadbtn_up =new Image(); downloadbtn_up.src ="images/download.png";
}
if (document.images) {
downloadbtn2_down=new Image(); downloadbtn2_down.src="images/download_pressed.png";
downloadbtn2_up =new Image(); downloadbtn2_up.src ="images/download.png";
}
// EVENT HANDLERS
function pressButton(btName) {
if (document.images)
eval('document.'+btName+'.src='+btName+'_down.src');
}
function releaseButton(btName) {
if (document.images)
eval('document.'+btName+'.src='+btName+'_up.src');
}
//--></script>
and for each image in the body I have (example is for 2 images): Code: <a href="indexpg.htm"
onMouseDown="pressButton('downloadbtn');return true;"
onMouseUp="releaseButton('downloadbtn');return true;"
onMouseOut="releaseButton('downloadbtn');return true;"
onClick="return true;"
><img id=downloadbtn width=422px height=80px border=0
alt="Download"
src="images/download.png"
></a>
<a href="indexpg.htm"
onMouseDown="pressButton('downloadbtn2');return true;"
onMouseUp="releaseButton('downloadbtn2');return true;"
onMouseOut="releaseButton('downloadbtn2');return true;"
onClick="return true;"
><img id=downloadbtn2 width=422px height=80px border=0
alt="Download"
src="images/download.png"
></a>
I want to be able to just use the same piece of code without having to add a new id for every download button on the page and tons of redundant code, especially since the image is the same it doesn't make sense to have to give each one a specific id and specific javascript for each of those id's. I would think this would be quite simple, but I know nothing about javascript, and I have searched a lot without any luck. PLEASE HELP ME! Hate to ask this as I know it's an easy one but surprisingly Google turns up no clear/simple answers! I'm modifying some old code and am not JS programmer (I'm a PHP programmer) and this is driving me nuts. The existing code makes sure that when the form is submitted that there isn't a missing value. There's also some hidden input values. The JS starts out function checkform(orderform) and the form tag includes onsubmit="return checkform(this);"> I can add an alert to the form to see varius input values, such as a hidden value for the input name 'description' I can use: alert (orderform.description.value) Eazy peazy. However the form has two different input type=image buttons now and I need to do some branching in the JS depending on which image button they press. I recall IE had an issue where it only sends the x and y coordinates So I figure an easy to determine which image button was pressed is just check to see if the x or y value for each button is non-zero. But I can't for the life of me figure out how to access the value. Example: alert (orderform.button1.x.value) doesn't work. Can someone refresh my memory or suggest an entirely different method for detecting which image button was used to submit a form? THanks in advance! 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 found this code sample that when a user clicks somewhere on the image, then an "X" will appear. I would like to have the "X"s remain visible even when the user clicks on a different area of the image. As you can imagine, a user clicks clicks clicks then there are "X"s everywhere. How do I do this? Do I need to create more "div" tags with the mouse click locations? <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Mouse position</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <script language="JavaScript" type="text/JavaScript"> var posx; var posy; function getMouse(e){ posx=0;posy=0; var ev=(!e)?window.event:e;//IE:Moz if (ev.pageX){//Moz posx=ev.pageX+window.pageXOffset; posy=ev.pageY+window.pageYOffset; } else if(ev.clientX){//IE posx=ev.clientX+document.body.scrollLeft; posy=ev.clientY+document.body.scrollTop; } else{return false}//old browsers } function showP(){ document.getElementById("div2").style.visibility="visible"; document.getElementById("div2").style.top =(posy-10)+'px'; document.getElementById("div2").style.left=(posx-6)+'px'; } </script> <style type="text/css"> .div1 {position:absolute;top:100px;left:100px;visibility:visible;z-index:5} .div2 {position:absolute;top:0px;left:0px;visibility:hidden;z-index:1;color:black;} .div3 {position:absolute;visibility:hidden;z-index:10;font-family:monospace;font-size:20px;font-weight:900;color:black;} </style> </head> <body onmousemove="getMouse(event)"> <div id="div1" class="div1"> <img src="./yourImage.jpg" onclick="showP()"> </div> <div id="div2" class="div3"> X </div> </body> </html> |
|||||||