|
JavaScript - Problems With My Image Map!
Similar TutorialsMy goal is to have one big picture center with 4 smaller pictures to the left that you click on and is target to the center. When you click on the center it will zoom. I haven't worked on it in a few years and not able to find the person who wrote the code. I added the zoom coding to the picture switch. The zoom works fine but when you click the smaller images the image is not viewable. Coding in the head Code: <!--Image Viewer-->
<script language="javascript" type="text/javascript">
<!--
function canManipulateImages() {
if (document.images)
return true;
else
return false;
}
// loadPosterImage
function loadPosterImage(imageURL) {
if (gImageCapableBrowser) {
document.imagePoster.src = imageURL;
return false;
}
else {
return true;
}
}
gImageCapableBrowser = canManipulateImages();
// -->
</script>
<!--End Image Viewer-->
<!--Picture Zoom-->
<script>
// C.2004 by CodeLifter.com
var nW,nH,oH,oW;
function zoomToggle(iWideSmall,iHighSmall,iWideLarge,iHighLarge,whichImage){
oW=whichImage.style.width;oH=whichImage.style.height;
if((oW==iWideLarge)||(oH==iHighLarge)){
nW=iWideSmall;nH=iHighSmall;}else{
nW=iWideLarge;nH=iHighLarge;}
whichImage.style.width=nW;whichImage.style.height=nH;
}
</script>
<!--End Picture Zoom-->
The body code Code: <!--Picture #4-->
<tr>
<td><A href="F:\mamies\santa_pic\purple_bottom.gif"
onClick="return(loadPosterImage('F:\mamies\santa_pic\purple_bottom.gif'))">
<img src="F:\mamies\santa_pic\purple_bottom.gif"
border=1 align=center width=56 height=75></A>
</td>
</tr>
</table>
<table align="center" border="1" cellspacing="0" cellpadding="5" height="10" bgcolor="#002152" bordercolor="#980008">
<tr>
<!--Image Zoom-->
<td><img name="imagePoster" src="F:\mamies\santa_pic\purple_front.gif"
border="0"
width="354"
height="502"
onclick="zoomToggle('354px','502px','708px','1004px',this);">
<!--End Image Zoom-->
Thanks for your help Charlene i have image button i need to display image .if the size of the image button is 100*100 and image size is 50*50 .the remaining space of the image button should be empty.the image should not stretch. can any one guide me i am new to programming Thanks in advance!!! I have gotten my script to do exactly what I want it to do with one exception. I have some thumbnail images that people can mouse over and the actual image is 100px by 75px. That is what I use for my thumbnail and they reside in www.website.com/images/thumbs/image1.jpg. I have the large version of the image that resides in www.website.com/images/image1.jpg. Its actual size is 640px by 480. When I mouse over my thumbnail, I don't want the thumbnail to appear for the larger image, I want the large image to appear instead? Let me know if you need ellaboration. Any help would be great! Thank you. Javascript Code: <script language="JavaScript">
function Change_Big_One(thumb){
document.getElementById('BigOne').src=thumb.src.replace("_th","")
}
</script>
HTML THUMBNAIL Code: <div><img src="https://www.website.com/images/thumbs/image1.jpg" class="thumb" onMouseOver="Change_Big_One(this)"></div> HTML LARGER IMAGE Code: <div><img src="" id="BigOne"></div> QUESTION 1: Hello. I would like to know if this is possible with Javascript, and if yes, if someone can please provide me with the code or point me in the right direction. Let me start of by saying that this is for an eBay listing. I know that they accept basic / limited javascript and if what I am asking is possible, I hope that it can work on eBay listings. I would like to know if it's possible to determine the dimensions of an image with Javascript from an Image url, and to then resize it or not based on the the size of the image. So, let's say this is the URL: www.adomainname.com/image.jpg and let's say that image is 1400 px x 1400 px. I would first like the javascript code to detect that size. I also would like the maximum dimension for any side of the image to be 600 px. If both sides of the image are over 600 px, for both sides to be reduced proportionally to 600 px or lower. If any one side of the image is larger than 600 px, the image is to be resized to 600 px or lower. If both sides are under 600 px, the image is to not be reduced. It would also be nice if it can detect whether the image is portion or landscape based on I guess the larger side, because an image at 600 px in height might be too big, but in width might be o.k. So, in this example (the 1400 px by 1400 px), the image is to be resized to 600 px x 600 px. For an image that's 300 px x 500 px, it should remain as such. For an image that's 400 px x 700 px, it should be resized to 400 / (700 / 600) px by 600 px, which is approximately 343 px x 600 px. I have looked a bit into this and I see things being mentioned about the image being loaded first completely on the screen, or about using server side language like PHP, and so on, but like I said, keep in mind that this is for eBay, and so I am limited. Note: The part that I am most interested in is in being able to detect the size / dimensions of the image. QUESTION 2: On a side note, does anyone know if it's possible to have a Javascript enlarging function for images, in which when one clicks on an image, it is enlarged, but either in a popup window that's smaller than the one behind it, and possibly centered, or by making the background go dark and then bringing up the enlarged image (is the latter done with Javascript; I have seen this effect for a while now and have always wondered.) Hello, I am working on a page that has a jQuery full browser BG image and I am trying to also utilize a MooTools gallery. There seems to be some interference between the two JavaScripts as only one works (whichever one is last in order in the header of the HTML document). Links: http://www.courtneyhunt.com.au/press_bg.html http://www.courtneyhunt.com.au/press_gallery.html I am a complete novice with JavaScript so if anyone could help that would be great. Thank you in advance. Here's what I usually use and have been using for years and it works great, just not for this particular purpose. I don't have a clue when it comes to javascript. Code: <noscript><img src="no_script_quote.gif" width="406" height="94"/></noscript><script language="javascript">
var delay=6000
var curindex=0
var images=new Array()
images[0]="quote1.gif"
images[1]="quote2.gif"
images[2]="quote3.gif"
images[3]="quote4.gif"
images[4]="quote5.gif"
var preload=new Array()
for (n=0;n<images.length;n++)
{
preload[n]=new Image()
preload[n].src=images[n]
}
document.write('<img name="defaultimage" src="'+images[Math.floor(Math.random()*(images.length))]+'">')
function rotateimage()
{
if (curindex==(tempindex=Math.floor(Math.random()*(images.length)))){
curindex=curindex==0? 1 : curindex-1
}
else
curindex=tempindex
document.images.defaultimage.src=images[curindex]
}
setInterval("rotateimage()",delay)
</script>
But, now I want to be able to set a default picture to be shown first and have the random pics appear next. I also don't want the default pic to show up again in the random array. So basically, every time the page was first visited, or refreshed it would show the default picture then move into the random pics. Is there anyway to modify the code that I'm using to accomplish this? Or... Any help would be appreciated. Thanks, Dell Hi, So here is my problem. I have a main image that has a bunch of images (e.g., stars) on top. I place the stars in absolute positions on top of the main image. If a user resizes the brower, then the position of the main image changes, so then the stars are off position (not on top of the main image). Should I: 1) make the main image be in an absolute position? or 2) do something else such that the main image moves around if the browser is resized? but then I don't know how to re-adjust the positions of the stars on the fly. Hello, My site has an image gallery with a row of pictures at the bottom. When I load up the page it should show image 1 in the main gallery window, but instead it's showing image in position #10 (the one to the left of #1). You can see what I'm talking about here. When you load the page it's showing the White House, but it should be showing the Green House (position #1 in slider). The White House can't be seen in the slider since it's in position #10, but shows up first int the main window. Is this a javascript issue or what? All JS files can be found here Can anybody help me debug this?? I'm going nuts Thank you Hi, I am still designing the website and want some flexibility. I am capturing the mouse clicks fine on top of an image, but the coordinates are absolute and not relative to the image. How can I capture mouse clicks relative to the image so that I can move the image anywhere in my website? Thanks! Hi there, I found this thread on the forum its from a few years back but the code works, but I can't seem to get the image that appears as you rollover the button to display in the correct place. I'm not sure if its because I'm using tables within tables? Should I recode in divs? Any help is greatly appreciated!! http://www.codingforums.com/archive/...p/t-95847.html Hey folks.. Hope you can help, I'm completely new to this and have no knowledge at all when it comes to javascript. Have been using this script on my site for a while. Is there anyway I can add a URL link to the images that are in my selector? When clicked would go to that page on my website. Thanks in advance of any help Nat <script language="JavaScript"> /* Random image slideshow- By Tyler Clarke (tyler@ihatecoffee.com) For this script and more, visit http://www.javascriptkit.com */ var delay=10000 //set delay in miliseconds var curindex=0 var randomimages=new Array() randomimages[0]="http://www.anywebsite.com/images/splash1.jpg" randomimages[1]="http://www.anywebsite.com/images/splash2.jpg" randomimages[2]="http://www.anywebsite.com/images/splash3.jpg" randomimages[3]="http://www.anywebsite.com/images/splash4.jpg" randomimages[4]="http://www.anywebsite.com/images/splash5.jpg" var preload=new Array() for (n=0;n<randomimages.length;n++) { preload[n]=new Image() preload[n].src=randomimages[n] } document.write('<img name="defaultimage" src="'+randomimages[Math.floor(Math.random()*(randomimages.length))]+'">') function rotateimage() { if (curindex==(tempindex=Math.floor(Math.random()*(randomimages.length)))){ curindex=curindex==0? 1 : curindex-1 } else curindex=tempindex document.images.defaultimage.src=randomimages[curindex] } setInterval("rotateimage()",delay) </script> I came across your forums here and it looked like a great place to get some help, and help is exactly what I need! I have been struggling with this javascript that changes an image and its corresponding useMap. For reference: - All images are the same size and located in the same directory, except the main map image - All images are preloaded (I did this just in case it was an image problem) - The page works fine in Firefox, and fine in IE until it crashes - http://www.forthecode.com/imagemap/untitled.htm The Problem: - When clicking on a state in the main image, the state image appears, if you then click on the "return to the overview" it returns to the overview image then promptly crashes IE within 1-2 seconds. - This even happens in a completely blank page (no other content) Exceptions: - Clicking on the state Mississippi does not cause this problem (you can go back and forth with Mississippi without problem) - Tennessee, Ohio, Arkansas, Illonois crash as soon as their state map comes up! The Javascript function itself: Code: <script language="Javascript">
function changemap(vari){
var vari;
var stoptime;
if(vari=="regionview"){
document.regionmap.src = "/images/branchmap2.jpg";
stoptime = setTimeout( function changemap1(){ document.regionmap.useMap="#Map"; clearTimeout(stoptime);} , 300);
}
else{
document.regionmap.src = "/images/states/" + vari + ".jpg";
stoptime = setTimeout( function changemap2(){ document.regionmap.useMap="#"+vari; clearTimeout(stoptime);} , 300);
}
}
</script>
The image tag and image maps: Code: <img src="images/branchmap2.jpg" name="regionmap" usemap="#Map" border="0">
<map name="Map">
<area shape="rect" coords="144,14,189,91" href="#" onClick="javascript: changemap('indiana');" alt="Indiana" title="Indiana">
<area shape="poly" coords="139,91,137,104,132,108,132,115,128,118,160,110,167,109,189,91" href="#" onClick="javascript: changemap('indiana');" alt="Indiana" title="Indiana">
<area shape="poly" coords="230,138,123,139,121,131,127,122,140,117,153,115,170,107,191,90,194,85,202,87,213,90,221,91,225,90,232,92,232,100,238,107,242,114,245,119" href="#" onClick="javascript: changemap('kentucky');" alt="Kentucky" title="Kentucky">
<area shape="poly" coords="153,177,143,244,144,280,127,287,115,286,113,272,83,271,78,264,86,249,93,239,89,228,88,212,90,202,97,192,105,178" href="#" onMouseUp="javascript: changemap('mississippi');" alt="Mississippi" title="Mississippi">
<area shape="poly" coords="87,226,17,227,16,212,7,212,3,128,108,130,107,142,113,142,120,128,121,131,121,141" href="#" onClick="javascript: changemap('arkansas');" alt="Arkansas" title="Arkansas">
<area shape="poly" coords="246,118,255,98,272,87,284,64,283,11,265,17,258,25,241,31,217,18,187,18,190,81,218,90,224,87,232,92,235,100" href="#" onClick="javascript: changemap('ohio');" alt="Ohio" title="Ohio">
<area shape="poly" coords="124,116,128,121,120,128,111,140,109,129,23,127,21,70,15,60,2,33,74,33,79,39,78,51,95,76,103,77,100,87,101,95,108,103,113,111,114,118" href="#" onClick="javascript: changemap('missouri');" alt="Missouri" title="Missouri">
<area shape="poly" coords="129,117,131,109,136,104,138,91,144,80,142,19,137,4,99,3,102,14,94,22,87,22,90,34,81,45,78,50,94,75,105,77,103,88,104,97,112,107,116,114" href="#" onClick="javascript: changemap('illonois');" alt="Illonois" title="Illonois">
<area shape="poly" coords="204,177,109,176,123,139,249,139" href="#" onMouseUp="javascript: changemap('tennessee');" alt="Tennessee" title="Tennessee">
</map>
<map name="arkansas">
<area shape="rect" coords="240,135,284,163" href="/branches/westmemphis.php" alt="West Memphis" title="West Memphis">
<area shape="circle" coords="209,143,7" href="/branches/westmemphis.php" alt="West Memphis" title="West Memphis">
<area shape="rect" coords="130,275,283,290" href="#" onClick="javascript: changemap('regionview');" alt="Overview" title="Overview">
</map>
<map name="mississippi">
<area shape="rect" coords="20,177,64,191" href="/branches/jackson.php" alt="Jackson" title="Jackson">
<area shape="circle" coords="103,183,8" href="/branches/jackson.php" alt="Jackson" title="Jackson">
<area shape="rect" coords="217,198,277,214" href="/branches/hattiesburg.php" alt="Hattiesburg" title="Hattiesburg">
<area shape="circle" coords="175,208,7" href="/branches/hattiesburg.php" alt="Hattiesburg" title="Hattiesburg">
<area shape="rect" coords="222,96,279,111" href="/branches/columbus.php" alt="Columbus" title="Columbus">
<area shape="circle" coords="195,106,8" href="/branches/columbus.php" alt="Columbus" title="Columbus">
<area shape="rect" coords="222,71,261,85" href="/branches/tupelo.php" alt="Tupelo" title="Tupelo">
<area shape="circle" coords="174,84,6" href="/branches/tupelo.php" alt="Tupelo" title="Tupelo">
<area shape="rect" coords="130,275,283,290" href="#" onClick="javascript: changemap('regionview');" alt="Overview" title="Overview">
</map>
<map name="missouri">
<area shape="rect" coords="195,262,243,275" href="/branches/sikeston.php" alt="Sikeston" title="Sikeston">
<area shape="circle" coords="216,199,7" href="/branches/sikeston.php" alt="Sikeston" title="Sikeston">
<area shape="rect" coords="247,173,280,186" href="/branches/ozora.php" alt="Ozora" title="Ozora">
<area shape="circle" coords="206,182,6" href="/branches/ozora.php" alt="Ozora" title="Ozora">
<area shape="rect" coords="232,158,278,169" href="/branches/sullivan.php" alt="Sullivan" title="Sullivan">
<area shape="circle" coords="194,165,7" href="/branches/sullivan.php" alt="Sullivan" title="Sullivan">
<area shape="rect" coords="228,128,275,142" href="/branches/stlouis.php" alt="St. Louis" title="St. Louis">
<area shape="circle" coords="206,137,8" href="/branches/stlouis.php" alt="St Louis" title="St Louis">
<area shape="rect" coords="198,97,258,112" href="/branches/wentzville.php" alt="Wentzville" title="Wentzville">
<area shape="circle" coords="182,130,6" href="/branches/wentzville.php" alt="Wentzville" title="Wentzville">
<area shape="rect" coords="130,275,283,290" href="#" onClick="javascript: changemap('regionview');" alt="Overview" title="Overview">
</map>
<map name="kentucky">
<area shape="rect" coords="24,218,72,231" href="/branches/paducah.php" alt="Paducah" title="Paducah">
<area shape="circle" coords="46,190,6" href="/branches/paducah.php" alt="Paducah" title="Paducah">
<area shape="rect" coords="35,127,95,141" href="/branches/henderson.php" alt="Henderson" title="Henderson">
<area shape="circle" coords="63,174,7" href="/branches/henderson.php" alt="Henderson" title="Henderson">
<area shape="rect" coords="94,218,175,232" href="/branches/bowlinggreen.php" alt="Bowling Green" title="Bowling Green">
<area shape="circle" coords="127,188,6" href="/branches/bowlinggreen.php" alt="Bowling Green" title="Bowling Green">
<area shape="rect" coords="108,75,159,90" href="/branches/louisville.php" alt="Louisville" title="Louisville">
<area shape="circle" coords="144,130,7" href="/branches/louisville.php" alt="Louisville" title="Louisville">
<area shape="rect" coords="179,75,232,89" href="/branches/georgetown.php" alt="Lexington" title="Lexington">
<area shape="circle" coords="193,127,8" href="/branches/georgetown.php" alt="Lexington" title="Lexington">
<area shape="rect" coords="130,275,283,290" href="#" onClick="javascript: changemap('regionview');" alt="Overview" title="Overview">
</map>
<map name="indiana">
<area shape="rect" coords="18,199,73,213" href="/branches/vincennes.php" alt="Vincennes" title="Vincennes">
<area shape="circle" coords="110,204,6" href="/branches/vincennes.php" alt="Vincennes" title="Vincennes">
<area shape="rect" coords="210,180,273,193" href="/branches/clarksville.php" alt="Clarksville" title="Clarksville">
<area shape="circle" coords="187,186,6" href="/branches/clarksville.php" alt="Clarksville" title="Clarksville">
<area shape="rect" coords="211,117,276,132" href="/branches/indianapolis.php" alt="Indianapolis" title="Indianapolis">
<area shape="circle" coords="159,124,5" href="/branches/indianapolis.php" alt="Indianapolis" title="Indianapolis">
<area shape="rect" coords="211,101,250,113" href="/branches/muncie.php" alt="Muncie" title="Muncie">
<area shape="circle" coords="178,116,7" href="/branches/muncie.php" alt="Muncie" title="Muncie">
<area shape="rect" coords="212,46,257,60" href="/branches/fremont.php" alt="Fremont" title="Fremont">
<area shape="circle" coords="185,55,7" href="/branches/fremont.php" alt="Fremont" title="Fremont">
<area shape="rect" coords="36,73,92,86" href="/branches/ftwayne.php" alt="Ft. Wayne" title="Ft. Wayne">
<area shape="circle" coords="179,79,5" href="/branches/ftwayne.php" alt="Ft. Wayne" title="Ft. Wayne">
<area shape="rect" coords="36,109,87,121" href="/branches/lafayette.php" alt="Lafayette" title="Lafayette">
<area shape="circle" coords="138,113,6" href="/branches/lafayette.php" alt="Lafayette" title="Lafayette">
<area shape="rect" coords="130,275,283,290" href="#" onClick="javascript: changemap('regionview');" alt="Overview" title="Overview">
</map>
<map name="illonois">
<area shape="rect" coords="28,184,89,197" href="/branches/estlouis.php" alt="East St. Louis" title="East St. Louis">
<area shape="circle" coords="126,192,6" href="/branches/estlouis.php" alt="East St. Louis" title="East St. Louis">
<area shape="circle" coords="148,153,5" href="/branches/effingham.php" alt="Effingham" title="Effingham">
<area shape="rect" coords="218,146,273,159" href="/branches/effingham.php" alt="Effingham" title="Effingham">
<area shape="rect" coords="219,120,260,134" href="/branches/urbana.php" alt="Urbana" title="Urbana">
<area shape="circle" coords="164,130,6" href="/branches/urbana.php" alt="Urbana" title="Urbana">
<area shape="rect" coords="130,275,283,290" href="#" onClick="javascript: changemap('regionview');" alt="Overview" title="Overview">
</map>
<map name="tennessee">
<area shape="rect" coords="0,199,49,213" href="/branches/memphis.php" alt="Memphis" title="Memphis">
<area shape="circle" coords="25,170,7" href="/branches/memphis.php" alt="Memphis" title="Memphis">
<area shape="rect" coords="41,80,90,94" href="/branches/jacksontn.php" alt="Jackson" title="Jackson">
<area shape="circle" coords="64,149,8" href="/branches/jacksontn.php" alt="Jackson" title="Jackson">
<area shape="rect" coords="130,275,283,290" href="#" onClick="javascript: changemap('regionview');" alt="Overview" title="Overview">
</map>
<map name="ohio">
<area shape="rect" coords="49,221,105,237" href="/branches/cincinatti.php" alt="Cincinatti" title="Cincinatti">
<area shape="circle" coords="74,162,7" href="/branches/cincinatti.php" alt="Cincinatti" title="Cincinatti">
<area shape="rect" coords="6,138,46,151" href="/branches/dayton.php" alt="Dayton" title="Dayton">
<area shape="circle" coords="91,146,6" href="/branches/dayton.php" alt="Dayton" title="Dayton">
<area shape="rect" coords="130,275,283,290" href="#" onClick="javascript: changemap('regionview');" alt="Overview" title="Overview">
</map>
This is exactly how it is in my html files. I really appreciate any input, suggestions or comments you can give me. Thanks in advance! So I have a gallery which is displaying images from an array called imgList. When they are displayed I want the user to be able to link directly to the image. Is there a simple way to do this? The JavaScript: Code: //<!--
var imgList = new Array(
"images/gallery/1.jpg",
"images/gallery/2.jpg",
"images/gallery/3.jpg",
"images/gallery/5.jpg",
"images/gallery/6.jpg",
"images/gallery/duo.jpg"
);
var clientData = new Array(
'',
'',
'',
'',
'',
'',
''
);
var currentMain = 0;
var currentMainT = 0;
var current_position=0;
var all_links="";
function init(){
all_links=document.getElementById('gallery').getElementsByTagName('a');
all_links[0].style.color="#7d3d3d";
ShowMain(current_position);
}
function color_me(element,color){
element.style.color=color;
}
function Prev(){
color_me(all_links[current_position],'#000000');
if((current_position-1)>-1){
current_position=current_position-1;
}
else{
current_position=(all_links.length-1);
}
ShowMain(current_position);
// ShowMainT(current_position);
color_me(all_links[current_position],'#7d3d3d');
}
function direct_selection(number){
all_links[current_position].style.color="#000000";
current_position=number;
ShowMain(current_position);
all_links[current_position].style.color="#7d3d3d";
}
function Next() {
color_me(all_links[current_position],'#000000');
if((current_position+1)<all_links.length){
current_position++;
}
else{
current_position=0;
}
ShowMain(current_position);
// ShowMainT(current_position);
color_me(all_links[current_position],'#7d3d3d');
}
function ShowMain(which){
currentMain = which;
currentMainT = which;
if ( currentMain < 0 ) currentMain = 0;
if ( currentMainT < 0 ) currentMainT = 0;
if ( currentMain > imgList.length-1) currentMain = imgList.length-1;
if ( currentMainT > clientData.length-1) currentMainT = clientData.length-1;
document.getElementById('mainImg').src = imgList[currentMain];
document.getElementById('mainText').innerHTML = clientData[currentMainT];
var PD = document.getElementById('Pg');
var PD2 = document.getElementById('Pg2');
document.getElementById("mainText").style.display = 'inline';
// return false;
}
onload = function() { ShowMain(0); }
onload = function() { ShowMainT(0); }
//-->
//<!--
function preloader(){
// counter
var i = 0;
// create object
imageObj = new Image();
// set image list
images = new Array();
images[0]="images/gallery/1.jpg";
images[1]="images/gallery/2.jpg";
images[2]="images/gallery/3.jpg";
images[3]="images/gallery/5.jpg";
images[4]="images/gallery/6.jpg";
images[5]="images/gallery/duo.jpg";
// start preloading
for(i=0; i<=3; i++){
imageObj.src=images[i];
}
}
//-->
The HTML where it is displayed: Code: <img id="mainImg" src="images/gallery/1.jpg" style=" border: solid #7d3d3d 5px;" alt="galleryimage" /> hi am studying for a exam an i have some problems. Just wanted to get an idea when is it more appropriate to use a for than a while loop? how much work is a loop performing? what is the fewest times a loop will perform its body? how many times will a loop perform its body? (as a function of a constant and of a variable) I am putting together a quiz in the form of a game, and I have tested the code for problems, and found a big one. Here is a part of my code that doesn't work- it always goes to "Sorry, incorrect", even when I type in 2.37. Code: var x=document.getElementById("varsource1");
if (x==="2.37")
{
alert("Correct.");
(More code here)
}
else if(x !== "2.37")
{
alert("Sorry, incorrect.");
}
If anyone wants my whole code, I can put it up later, if you ask me for it. insidehb.com/main/imageofday/aug16to31/aug16to31.htm 1. the "visit henrbuilt" link is in the wrong position (its supposed to be centered) 2. there are too many thumbnails for "aug 16 - 31" so i had to redo "thumbs_mask.gif" (which makes the gray and clear thing at the bottom that moves) so that it was longer and covered all the thumbnails. now that is is 400 px longer, the center of it moved 200px to the right and i cant get it to move 200px to the left. i would i guess it has to do with my style sheet (insidehb.com/main/imageofday/aug16to31/style13.css) but it could also have to do with my main html page (insidehb.com/main/imageofday/aug16to31/aug16to31.htm) 3. its still being messed up in IE even with a new doctype i have 3 different problems: 1. I was trying to make is display Kentucky Resident yes is the box is checked and nothing if it is not checked. 2. while trying to add this in I messed something up and not the alert will not display anything at all. 3. last time I click the button the play load a page error and i have no idea why. any and all help would be appreciated. thanks. Code: <?xml version="1.0" encoding="utf-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>EKU</title>
<script type="text/javascript">
//<![CDATA[
function valStudent()
{
var lastName = document.frmStudentInfo.txtLastName.value;
var firstname = document.frmStudentInfo.txtFirstName.value;
var mi = document.frmStudentInfo.txtS_Mi.value;
var address = document.frmStudentInfo.txtS_Add.value;
var city = document.frmStudentInfo.txtS_City.value;
var state = document.frmStudentInfo.txtS_State.value;
var zip = document.frmStudentInfo.txtS_Zip.value;
var phone = document.frmStudentInfo.txtS_Phone.value;
var dob = new Date (document.frmStudentInfo.txtS_Dob.value);
var selectAdvisor = document.frmStudentInfo.lstF_ID.selectIndex;
var res = document.frmStudentInfo.chkResident.value;
var stuClass;
var classChecked = false;
for (var i=0; i < document.frmStudentInfo.optS_Class.length; i++)
{
if (document.frmStudentInfo.optS_Class[i].checked)
{
classChecked = true;
stuClass = document.frmStudentInfo.optS_Class[i].value;
}
}
if (lastName == "")
{
alert ("Please enter a last name");
document.frmStudentInfo.txtLastName.select();
return false;
} else if (firstname == "")
{
alert ("Please enter a first name");
document.frmStudentInfo.txtFirstName.select();
return false;
}else if (address == "")
{
alert ("Please enter a address");
document.frmStudentInfo.txtS_Add.select();
return false;
} else if (city == "")
{
alert ("Please enter a city");
document.frmStudentInfo.txtS_City.select();
return false;
} else if (state == "")
{
alert ("Please enter a state");
document.frmStudentInfo.txtS_State.select();
return false;
} else if (zip == "")
{
alert ("Please enter a zip");
document.frmStudentInfo.txtS_Zip.select();
return false;
} else if (phone == "")
{
alert ("Please enter a phone");
document.frmStudentInfo.txtS_Phone.select();
return false;
}else if (dob == "NaN")
{
alert ("Date of Birth is not valid, use MM/DD/YYYY to enter data");
document.frmStudentInfo.txtS_Dob.select();
return false;
}else
{
alert ("Last name: " + lastName + "\n" + "First Name: " + firstname + "\n" +
"mi: " + mi + "\n" + "Address: " + address + "\n" + "City: " + city + "\n" +
"State: " + state + "\n" + "Zip: " + zip + "\n" + "phone: " + phone + "\n" +
"Date of Birth: " + dob + "\n" +
"Advisor " + document.frmStudentInfo.lstF_ID.text(selectAdvisor).text +
"\n" + "classfication " + stuClass);
return true;
}
}
//]]>
</script>
</head>
<body>
<table width="70%" align="center">
<tr>
<td><img src="nwlogo.jpg" width="196" height="93" alt="** PLEASE DESCRIBE THIS IMAGE **" /></td>
<td>
<h2>Student Information</h2>
</td>
</tr>
</table>
<form name="frmStudentInfo" action="action%20marker" id="frmStudentInfo">
<table align="center">
<tr>
<td> Last Name:</td>
<td><input type="text" name="txtLastName" size="20" /></td>
<td></td>
<td> </td>
<td>
<h4>Class:</h4>
</td>
<td></td>
</tr>
<tr>
<td> First Name:</td>
<td><input type="text" name="txtFirstName" size="20" /></td>
<td> </td>
<td><input type="radio" name="optS_Class" value="Freshman" /></td>
<td>Freshman</td>
</tr>
<tr>
<td> MI:</td>
<td><input type="text" name="txtS_Mi" size="5" /></td>
<td> </td>
<td><input type="radio" name="optS_Class" value="Sophomore" /></td>
<td>Sophomore</td>
</tr>
<tr>
<td> Address:</td>
<td><input type="text" name="txtS_Add" size="20" /></td>
<td> </td>
<td><input type="radio" name="optS_Class" value="Junior" /></td>
<td>Junior</td>
</tr>
<tr>
<td> City:</td>
<td><input type="text" name="txtS_City" size="20" /></td>
<td> </td>
<td><input type="radio" name="optS_Class" value="Senior" /></td>
<td>Senior</td>
</tr>
<tr>
<td> State:</td>
<td><input type="text" name="txtS_State" size="5" /></td>
<td> </td>
<td><input type="radio" name="optS_Class" value="Graduate" /></td>
<td>Graduate</td>
</tr>
<tr>
<td> ZIP Code:</td>
<td><input type="text" name="txtS_Zip" size="20" /></td>
<td> </td>
<td></td>
<td></td>
</tr>
<tr>
<td> Phone:</td>
<td><input type="text" name="txtS_Phone" size="20" /></td>
<td> </td>
<td>:<input name="chkResident" type="checkbox" /></td>
<td> Kentucky Resident</td>
</tr>
<tr>
<td> Date of Birth:</td>
<td><input type="text" name="txtS_Dob" size="20" /></td>
<td> </td>
<td>Advisor</td>
<td><select size="1" name="lstF_ID">
<option selected="selected">1 (Chuck Lin)</option>
<option>2 (Chris Blades)</option>
<option>3 (Steve Loy)</option>
<option>4 (Bob Mahaney)</option>
<option>5 (Ted Randles)</option>
</select></td>
</tr>
<tr>
<td></td>
<td><input type="submit" value="Submit" onclick="valStudent()" /></td>
</tr>
</table>
</form>
</body>
</html>
Hi: Code below works fine in Firefox and Firebug shows no problems. Code:
function changePlaylist(newplaylist,no_of_items)
{
playerConfig.playlist = [];
for(var i = 0; i < no_of_items; i++)
{
playerConfig.playlist[i] = newplaylist;
}
setTimeout("createPlayer()",1); //delay create player to allow playlist to "stabilize"
mediaPlayer.play(); // play the newly loaded playlist sequence*
}
IE9 script debugging (attached file) indicates problems with mediaplayer.play(). Even so it plays a movie. When I try playing a different movie in IE 9 nothing happens. Like I said works fine in Firefox and worked fine in IE 8. I called MS about problems with IE 9 security stuff etc. Talked with a guy in Bangladesh or some place over a bad connection who said they were gathering bug information (as usual with MS). All the dialogs where you can "allow scripting" etc. etc. have been replaced with some mindless stuff (as usual for MS). Anyway, are there some workarounds for IE9 problems? I've been trying to figure this out for days.. I just found a script that Old Pedant made which is close to what i need: http://www.clearviewarts.com/fadeBigDemo.html But two concerns: 1. how can i have it so when i click the thumbnail, it fades in a different image (rather than just a larger version of the thumbnail)? 2. how can i have it fade in and out from simply hovering over the thumbnail (rather than clicking it)? Your help would be greatly appreciated.. All, I'd like to have something similar to the rotating images and text on my website. The website that I would like to mimick is: http://www.photoworks.com/ You can see that the images move but there is still text over the image that I can click on. How would I go about doing something similar to this on my website. I'm guessing it's a combination of Javascript and CSS but I figured I'd start here. Thanks for any help in advance. |
|||||||