|
JavaScript - Keep Last Image Viewed And Start With Next Image
I'm new to javascript. I'm trying to make a script to load one of a series of images, as hyperlinks, in order, not randomly, on each page load of my site homepage. In addition, I need the script to do the following: if the user first visits today he gets the first image and if he returns to the homepage later today or any other time in the future, the series of images loaded begins with the next image in the series. In other words if there are a series of 4 images, he sees one image each visit to the homepage, in order, and the sequence begins over again once he has viewed all 4 images, regardless of when that is.
I found some code on the 'net that loads images in sequence on each page load, but it only works with the current viewing session, and once the viewer leaves the site the last image they viewed is not kept and the sequence starts from the beginning instead of where they left off. The code is below, but I can't figure out how to modify it to do what I want. Any help would be greatly appreciated. Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<noscript><img src="images/Image1.png"></noscript>
<script type="text/javascript">
function robin(){
//Set Your Images in the below Array:
var robin_im=["images/Image1.png", "images/Image2.png", "images/Image3.png", "images/Image4.png"]
//set the links in the below Array:
var robin_link=['http://www.yahoo.com', 'http://www.google.com', 'http://www.cnn.com', 'http://www.msnbc.com']
//////////////// Stop Editing //////////////////
function createCookie(name,value,days) {
if (days) {
var date = new Date();
date.setTime(date.getTime()+(days*24*60*60*1000));
var expires = "; expires="+date.toGMTString();
}
else var expires = "";
document.cookie = name+"="+value+expires+"; path=/";
}
function readCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for(var i=0;i < ca.length;i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1,c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
}
return null;
}
function eraseCookie(name) {
createCookie(name,"",-1);
}
var num=readCookie('robim')? readCookie('robim')*1 : 0;
document.write('<a href="'+robin_link[num]+'"><img src="'+robin_im[num]+'" border=0></a>')
num=num<robin_im.length-1? num+1 : 0;
createCookie('robim', num);
}
robin();
</script>
</body>
</html>
Similar TutorialsHi, I'm very new to coding Javascript, so have no idea what I'm doing, so sorry What I'm trying to do is, on my Wordpress Blog I have a button/Image: Code: src="http://Mysite.com/Images/Button.png" I would like for when a user Clicks this Image/button, 2 things to happen - 1. For my Content Locker to pop up, I believe that i already have the correct code for that?: Code: onclick="var fileref=document.createElement('script');fileref.setAttribute('type','text/javascript'); fileref.setAttribute('src', 'http://MYCONTENTLOCKER.com/guid?:1234567890')
For this content locker to trigger, The whole action needs to have a ID e.g. 'ID="button1'? And 2. For a timer to start for say 30 Seconds. When that timer ends, i would like the original button/image to be replaced with a different button/image. And when that New button is clicked i would like a text string to appear below the button - saying something e.g. 'You've completed this part' I know that this is a lot to ask, and I will be so very grateful if someone helps me out here! Thanks! Harry. 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> 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. 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.) 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. 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, 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! 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 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 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 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. Can someone tell me how to veiw this eval's out put? PHP Code: function doButtons(picimage) { eval("document['picture'].src = " + picimage + ".src"); } PHP Code: <?php // to change the image size within the web page function imageResize($width, $height, $target) { //takes the larger size of the width and height and applies the formula accordingly... //this is so this script will work dynamically with any size image if ($width > $height) { $percentage = ($target / $width); } else { $percentage = ($target / $height); } //gets the new value and applies the percentage, then rounds the value $width = round($width * $percentage); $height = round($height * $percentage); //returns the new sizes in html image tag format... //this is so you can plug this function inside an image tag and just get the return "width='$width' height='$height'"; } ?> <HEAD> <SCRIPT LANGUAGE="JavaScript"> <!-- Original: Ronnie T. Moore, Editor --> <!-- Web Site: The JavaScript Source --> <!-- Begin var photo_1 = new Image(); var photo_2 = new Image(); var photo_3 = new Image(); photo_1.src = "uploads/harkly_1.jpg"; photo_2.src = "uploads/harkly_2.jpg"; photo_3.src = "uploads/harkly_3.jpg"; function doButtons(picimage) { eval("document['picture'].src = " + picimage + ".src"); } // End --> </script> </HEAD> <?php //get the image size of the picture and load it into an array $photo_1="uploads/harkly_1.jpg"; $photo_2="uploads/harkly_2.jpg"; $photo_3="uploads/harkly_3.jpg"; $myImg1 = getimagesize($photo_1); $myImg2 = getimagesize($photo_2); $myImg3 = getimagesize($photo_3); echo " <BODY> <center> <table border=1> <tr><td> <p> <li><a href = '' onmouseover = \"doButtons('photo_1')\"><img name='photo_1' src='$photo_1' ";echo imageResize($myImg1[0], $myImg1[1], 55); echo " border=0><p> <li><a href = '' onmouseover = \"doButtons('photo_2')\"><img name='photo_2' src='$photo_2' ";echo imageResize($myImg2[0], $myImg1[1], 55); echo " border=0><p> <li><a href = '' onmouseover = \"doButtons('photo_3')\"><img name='photo_3' src='$photo_3' ";echo imageResize($myImg3[0], $myImg1[1], 55); echo " border=0><p> <td width=440 height=300> <img name='picture' src=uploads/harkly_1.jpg ";echo imageResize($myImg1[0], $myImg1[1], 300); echo " border=0></td> </tr> </table> </center> "; ?> 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.. what it is essentially is a button on a larger image map that, upon pressing it, should toggle another image map as visible. the toggled image itself, has an x in the bottom corner, for dismissing it, but of course, needs to have the toggle invisible event attached to its image map coordinates. if that makes sense. that means one button on a totally different image map needs to toggle visible another image map. and the image map that was toggled visible needs to have its own toggle to make it invisible again oh and i should mention, the original image map is a background image. lol but the toggled visible image map doesn't have to be. i have the code for the background image map already, and the coords for the first button that is supposed to toggle the other image map as visible. here's a couple snippets of the code first the styling Code: <style type="text/css">
html, body {
margin: 0;
background: #000;
}
#container {
width: 1024px;
margin: 0px auto;
background: #000;
overflow: no;
}
.box1 {
position: relative;
margin: 0;
padding: 0;
width: 1024px;
height: 220px;
background: url(footershipnav.jpg) no-repeat;
}
#box-link {
position: absolute;
top: 40px;
left: 260px;
width: 25px;
height: 25px;
background: url();
border: 0px solid yellow;
}
#box-link2 {
position: absolute;
top: 40px;
left: 290px;
width: 25px;
height: 25px;
background: url();
border: 0px solid yellow;}
#box-link3 {
position: absolute;
top: 40px;
left: 320px;
width: 25px;
height: 25px;
background: url();
border: 0px solid yellow;}
then the image map liniks for the original image map. one of these links would be the toggle visible button. Code: <a id="box-link" href="shipnav.html" target="content"></a> <a id="box-link2" href="canvas3d2.html" target="content"></a> <a id="box-link3" href="canvas3d2c.html" target="content"></a> there's actually many more links on the image map than that but thought it might be helpful in setting up the first toggle to show the set up. Here is the code I am working with, been at it for 3 days now. I am at a loss....cant see why it shouldnt work. window.onload = defineMarquee; var timeID; var marqueeTxt = new Array(); var marqueeOff = true; function defineMarquee(){ var topValue = 0; var allElems = document.getElementsByTagName("*"); for (var i=0; i < allElems.length; i++){ if (allElems[i].className =="marqueTxt") marqueeTxt.push(allElems[i]); } for (i = 0; i < marqueeTxt.length; i++) { if (marqueeTxt[i].getComputedStyle) { topValue = marqueeTxt[i].getPropertyValue("top"); } else if (marqueeTxt[i].currentStyle) { topValue = marqueeTxt[i].currentStyle("top"); } } document.getElementById("startMarquee").onclick = startMarquee; document.getElementById("stopMarquee").onclick = stopMarquee; } function startMarquee(){ if (marqueeOff == true) { timeID = setInterval("moveMarquee()", 50); marqueeOff = false; } } function stopMarquee(){ clearInterval(timeID); marqueeOff = true; } function moveMarquee(){ var topPos = 0; for (i=0; i < marqueeTxt.length; i++){ if (marqueeTxt[i].getComputedStyle) { topPos = parseInt(marqueeTxt[i].getPropertyValue("top")); } else if (marqueeTxt[i].currentStyle) { topPos = parseInt(marqueeTxt[i].currentStyle("top")); } if (topPos < -110) { topPos = 700; } else { topPos -= 1; } marqueeTxt[i].style.top = topPos + "px"; } } How do I show the default icon for pdf, doc, etc... else show the image? Code: Show the default icon for pdf, doc, etc... else show image. Default icon: '<img alt="" src="images/icons/' + sIcon + '.gif" width="16" height="16" border="0"><\/a>' + The image: '<img alt="" src="' + fileUrl.replace( /'/g, '\\\'') + '" height="36" border="0"></a>' + Attempted javascript onError but only certain browsers support that or it's my code. Code: '<img alt="" src="' + fileUrl.replace( /'/g, '\\\'') + '" height="36" border="0" onerror="this.src=images/icons/' + sIcon + '.gif"></a>' + Any ideas? |
|||||||