JavaScript - Need Help Getting Switch Image To Be A Link As Well
Hello,
I'm new to this forum and well... I'm pretty new to JavaScript as well. Here's my problem: I'm trying to create a switch image code that will allow the new image to be a link as well. In the list item where you'll see ('blue.jpg') if I try to make this an anchor tag - it breaks the code. Any suggestions would be great. Thanks for taking a look! Code: <head> <script> function switch1(div) { if (document.getElementById('blue')) { var option=['blue','green','purple']; for(var i=0; i<option.length; i++) { obj=document.getElementById(option[i]); obj.style.display=(option[i]==div)? "block" : "none"; } } } // function switchImg(i){ document.images["blue"].src = i; } </script> <style> #image-switch ul { margin:0 0 0 20px; color:red; list-style-type:none; } #image-switch li { padding:10px; } #image-switch #green, #image-switch #purple { display:none; } #radiobs { width:150px; position:relative; margin:0; } #radiobs input { margin:0; padding:0; position:absolute; margin-left:6em; width:15px; } </style> </head> <div><img src="blue.jpg" id="blue" /></div> <ul id="radiobs"> <li><a href="#n" onclick="switchImg('blue.jpg')"><img src="sample_box_1_fpo.jpg" width="30" height="30" alt="Sample Box 1 Fpo"></a></li> <li><a href="#n" onclick="switchImg('green.jpg')"><img src="sample_box_2_fpo.jpg" width="30" height="30" alt="Sample Box 1 Fpo"></a></li> <li><a href="#n" onclick="switchImg('purple.jpg')"><img src="sample_box_3_fpo.jpg" width="30" height="30" alt="Sample Box 1 Fpo"></a></li> </ul> </div> <div class="clear"></div> Similar Tutorialshi, I have a few links on my website as follows: Code: <a href="javascript:switchid('a6');">Link 6</a> but when I view source it comes out like this: Code: <a href='javascript:switchid('>Link 6</a> Can someone please help? I know theres a lot of codes out there online for this but I cannot seem to get any of them to work for me. I am trying to make my layout for an item page for an online store. I'd like one big image, with one or 2 thumbnails under it which when clicked will switch the big image. Clicked, not mouseover. Lets say my big images would be REG1.jpg and REG2.jpg, the first being the image on the page that will switch. THUMB1.jpg and THUMB2.jpg being the thumbnails. Is there a simple way to do this or is the code a complete mess like I've been seeing on so many pages? I'd say I have an intermediate understanding of HTML and I've just started teaching myself javascript but I'm starting to fall off the wagon, I can't decipher the stuff coming up in these example codes. Any help would be thoroughly appreciated!! Hey guys, Im creating a javascript content expander and would like to know how to create it so it changed the image from an down arrows to open the box, and a down arrow to close the box. Here is my current code. Code: <script type="text/javascript"> //var persistmenu="yes" var persisttype="sitewide" if (document.getElementById){ document.write('<style type="text/css">\n') document.write('.submenu{display: none;}\n') document.write('</style>\n') } function SwitchMenu(obj){ if(document.getElementById){ var el = document.getElementById(obj); var ar = document.getElementById("masterdiv").getElementsByTagName("span"); if(el.style.display != "block"){ for (var i=0; i<ar.length; i++){ if (ar[i].className=="submenu") ar[i].style.display = "none"; } el.style.display = "block"; }else{ el.style.display = "none"; } } } function get_cookie(Name) { var search = Name + "=" var returnvalue = ""; if (document.cookie.length > 0) { offset = document.cookie.indexOf(search) if (offset != -1) { offset += search.length end = document.cookie.indexOf(";", offset); if (end == -1) end = document.cookie.length; returnvalue=unescape(document.cookie.substring(offset, end)) } } return returnvalue; } function onloadfunction(){ if (persistmenu=="yes"){ var cookiename=(persisttype=="sitewide")? "switchmenu" : window.location.pathname var cookievalue=get_cookie(cookiename) if (cookievalue!="") document.getElementById(cookievalue).style.display="block" } } function savemenustate(){ var inc=1, blockid="" while (document.getElementById("sub"+inc)){ if (document.getElementById("sub"+inc).style.display=="block"){ blockid="sub"+inc break } inc++ } var cookiename=(persisttype=="sitewide")? "switchmenu" : window.location.pathname var cookievalue=(persisttype=="sitewide")? blockid+";path=/" : blockid document.cookie=cookiename+"="+cookievalue } if (window.addEventListener) window.addEventListener("load", onloadfunction, false) else if (window.attachEvent) window.attachEvent("onload", onloadfunction) else if (document.getElementById) window.onload=onloadfunction if (persistmenu=="yes" && document.getElementById) window.onunload=savemenustate </script> <style type="text/css"> .sectionHeadernews .plaquenews { background: url(../layout/section_header_plaque_medium.png) center no-repeat; } .sectionHeadernews .plaquenews, .sectionHeaderchat .plaque_medium, .sectionHeaderchat .plaque_large { height: 26px; text-align:center overflow: hidden; line-height: 25px; font-size: 14px; font-family: Palatino Linotype, Book Antiqua, Palatino, Times New Roman, Times, serif; font-weight: bold; font-variant: small-caps; color: #30291f; } .sectionHeadernews { background: #bd9c5a url(../layout/section_header_bg.png) top repeat-x; width: 754px; } .sectionHeadernews .leftnews { background: url(../layout/section_header_left_news.png) left no-repeat; } .sectionHeadernews .rightnews { background: url(../layout/section_header_right_news.png) right no-repeat; } </style> <div class="sectionHeadernews"> <div class="leftnews"> <div class="rightnews" onclick="SwitchMenu('sub1')" > <div class="plaquenews"> Click to view current website news </div> </div> </div> </div> I want the <div class="rightnews"> thing to change from an up arrow to a down arrow. Here are the icons im using. For the box to contract: for the box to expand. If someone could help me out by adding the code so the images switch would be great! My 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 Example of my problem: HERE The code is derived from a site offering some advice for javascript: HERE The example of mine tries to use an image as hyperlink... and use mouse events for certain actions. Aside from possibly being the worst javascript code humanly possible...once I slaughtered the code from the site mentioned above, I'm not getting how to arrange things so that a mouse over event switches an image , as does mousedn and mouseup, And (and this is the rub for me) repeating the setup in the same way for a list of quicktime video links. I've got it to work for one row in the table I'm using to attempt some kind of formatting. I'm told `css' is a better way for that but I'm completely ignorant about how to use `css'. So, for now I'm using a table to get at the javascript question. The idea is for viewer to see three red dots at the front of each item being offered. Mouseover is supposed to switch to a green arrow... mousedn is supposed to switch to 2 check marks. I wanted the check marks to persist, so for lack of knowing how to accomplish that... I let mouseup call the same image. (the check marks; Maybe just omitting any directive for mouseup would have the same effect?) About the `image persisting after being clicked' question: It is really a separate question so I will probably start a different thread for that. What I've done works for one list item... but fails for more than one. The only active member of the list (2 in my example) is the bottom one. mouse events on the top one are carried out on the bottom one. I tried to just change the name of all variables in the javascript, and the name given in the `img src=' section of the html code, for the second row... but clearly not what is needed. I changed the names shown below by incrementing the number in the names by 1. I've only posted one row's worth but the next row uses the same code with the variables incremented. And hopefully someone will look at the actual example (URL given above) and see the full code. The basic code I've put here for convience.: Code: <table> <tr> <td valign=top > <A href="./t2.html" onMouseOver="return changeImage()" onMouseOut= "return changeImageBack()" onMouseDown="return handleMDown()" onMouseUp="return handleMUp()" ><img name="jsbutton_0" src="./3dots.png" border="0" alt="javascript button"></A> some nice video <SCRIPT language="JavaScript"> var myimgobj_0 = document.images["jsbutton_0"]; function changeImage() { document.images["jsbutton_0"].src= "./aro1r-mo.png"; return true; } function changeImageBack() { document.images["jsbutton_0"].src = "./3dots.png"; return true; } function handleMDown() { document.images["jsbutton_0"].src = "./checks.png"; return true; } function handleMUp() { document.images["jsbutton_0"].src = "./checks.png"; return true; } </SCRIPT> </tr> </td> 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" /> I have a script but the script links to the email link, I need it to link the email but I also want to add the image of the email for people who do not have JS. How would I do this? Code: <script type="text/javascript" language="javascript"> <!-- // Email obfuscator script 2.1 by Tim Williams, University of Arizona // Random encryption key feature by Andrew Moulden, Site Engineering Ltd // This code is freeware provided these four comment lines remain intact // A wizard to generate this code is at http://www.jottings.com/obfuscator/ { coded = "gUivfkUiz@Vzz38CfC.3ip.Uj" key = "gOoyt8wF74qDiElQcJTb6KXhNpS3skn510ueAfLV9BaHZxdGmrIW2CjvRYPUzM" shift=coded.length link="" for (i=0; i<coded.length; i++) { if (key.indexOf(coded.charAt(i))==-1) { ltr = coded.charAt(i) link += (ltr) } else { ltr = (key.indexOf(coded.charAt(i))-shift+key.length) % key.length link += (key.charAt(ltr)) } } document.write("<a href='mailto:"+link+"'>"+link+"</a>") } Hi guys I need help on sorting out a drag&drop script I'm a bit of a rookie with programming, so I found this script somewhere and I managed to implement it in my code...unfortunately now I need to slightly modify the code, and I'm completely lost I have this drag&drop script that moves some images around the screen, but I'd like to assign an event document.getElementById("XXXXX").onclick = blablabla to each of those images. The problem is that, of course, every time I click on the image to drag it around, this activates the link. With a doubleclick event everything works smooth, however it's a solution I don't quite like. I was thinking about a way to control the code so that while the image moves the link is somehow "not active", but if the user simply clicks without dragging then it activates the .onclick function I have the following piece of code in the head section of my page, which is the actual code for dragging the elements Code: function Browser() { var ua, s, i; var ln = 1; this.isIE = false; this.isNS = false; this.version = null; ua = navigator.userAgent; s = "MSIE"; if ((i = ua.indexOf(s)) >= 0) { this.isIE = true; this.version = parseFloat(ua.substr(i + s.length)); return; } s = "Netscape6/"; if ((i = ua.indexOf(s)) >= 0) { this.isNS = true; this.version = parseFloat(ua.substr(i + s.length)); return; } // Treat any other "Gecko" browser as NS 6.1. s = "Gecko"; if ((i = ua.indexOf(s)) >= 0) { this.isNS = true; this.version = 6.1; return; } } var browser = new Browser(); // Global object to hold drag information. var dragObj = new Object(); dragObj.zIndex = 0; function dragStart(event, id) { var el; var x, y; // If an element id was given, find it. Otherwise use the element being // clicked on. if (id) dragObj.elNode = document.getElementById(id); else { if (browser.isIE) dragObj.elNode = window.event.srcElement; if (browser.isNS) dragObj.elNode = event.target; // If this is a text node, use its parent element. if (dragObj.elNode.nodeType == 3) dragObj.elNode = dragObj.elNode.parentNode; } // Get cursor position with respect to the page. if (browser.isIE) { x = window.event.clientX + document.documentElement.scrollLeft + document.body.scrollLeft; y = window.event.clientY + document.documentElement.scrollTop + document.body.scrollTop; } if (browser.isNS) { x = event.clientX + window.scrollX; y = event.clientY + window.scrollY; } // Save starting positions of cursor and element. dragObj.cursorStartX = x; dragObj.cursorStartY = y; dragObj.elStartLeft = parseInt(dragObj.elNode.style.left, 10); dragObj.elStartTop = parseInt(dragObj.elNode.style.top, 10); if (isNaN(dragObj.elStartLeft)) dragObj.elStartLeft = 0; if (isNaN(dragObj.elStartTop)) dragObj.elStartTop = 0; // Update element's z-index. dragObj.elNode.style.zIndex = ++dragObj.zIndex; // Capture mousemove and mouseup events on the page. if (browser.isIE) { document.attachEvent("onmousemove", dragGo); document.attachEvent("onmouseup", dragStop); window.event.cancelBubble = true; window.event.returnValue = false; } if (browser.isNS) { document.addEventListener("mousemove", dragGo, true); document.addEventListener("mouseup", dragStop, true); event.preventDefault(); } } function dragGo(event) { var x, y; // Get cursor position with respect to the page. if (browser.isIE) { x = window.event.clientX + document.documentElement.scrollLeft + document.body.scrollLeft; y = window.event.clientY + document.documentElement.scrollTop + document.body.scrollTop; } if (browser.isNS) { x = event.clientX + window.scrollX; y = event.clientY + window.scrollY; } // Move drag element by the same amount the cursor has moved. dragObj.elNode.style.left = (dragObj.elStartLeft + x - dragObj.cursorStartX) + "px"; dragObj.elNode.style.top = (dragObj.elStartTop + y - dragObj.cursorStartY) + "px"; if (browser.isIE) { window.event.cancelBubble = true; window.event.returnValue = false; } if (browser.isNS) event.preventDefault(); } function dragStop(event) { // Stop capturing mousemove and mouseup events. if (browser.isIE) { document.detachEvent("onmousemove", dragGo); document.detachEvent("onmouseup", dragStop); } if (browser.isNS) { document.removeEventListener("mousemove", dragGo, true); document.removeEventListener("mouseup", dragStop, true); } } then in the Body, I have the DIV that can be dragged around through the "onmousedown" event Code: <div id="milano" class="aBar" style="width:auto; height:auto;" onmousedown="dragStart(event, 'milano')"> <?php print '<a href="#"><img border="0" src="images/works/thumbnails/milano.jpg" alt="" style="float:left; position:absolute; top:'.rand(50,300).'px; left:'.rand(100,500).'px"/></a>' ?> </div> then, in the Body as well, I have the javascript that I'd like to activate only if the image is clicked on BUT not dragged around Code: <script> window.onload = function () { document.getElementById("milano").onclick = function () { alert('AAAAA'); } } </script> I'm really sorry the code is REALLY messy, but as I said I'm just a rookie and I know this is not an elegant solution at all Thank you very much for your time, I really hope you can help me out with that as I spent the last 2 weeks tying to find a solution... Cheers, Mattia Hi all, I am looking to create a script that will let me use an image as the a:active link. I did a little research and found this most likely cannot be done in CSS. Can someone point me in the right direction as far as documentation? Thanks a bunch! First time poster!!! This forum is great. Anyway, I am having issues with a program that I am writing. I basically have to start with a thumbnail image (non-link) and a link that says "click to see larger image". When I click the link, the image changes to a larger version AND the link text must change to "click to see smaller version". I am able to do this with code below, but I need to find a way to then click on the link again (now "click to see smaller version) and see the whole process undo itself (i.e. back to the thumbnail and "click to see larger version" link). I believe that my problem has something to do with the href tag. At first I left it blank, but nothing worked and it would open a file system menu when I click it. I changed it to "#" and everything worked fine, but I can't get anything to happen after the first click changes the image and text. I am only guessing that it might be because it is a new Web page with "#" at the end of it. I tried a bunch of if-else statements with the src file, but nothing worked. Help please... Code: <script type="text/javascript"> <!--Hide from incompatible browsers /* <![CDATA[ */ function changeText() { document.getElementById('link').innerHTML = 'View Smaller Image'; return false; } function changeImage() { var newImage = new Image(); newImage.src = "images/cottage_large.jpg"; document.getElementById('thumbnail').src = newImage.src; return false; } /**/ /* ]]> */ // Stop hiding from incompatible browsers --> </script> </head> <body> <h3>Real Estate</h3> <p><img src="images/cottage_small.jpg" id="thumbnail"></p> <a href="#" id="link" onclick="changeImage(); changeText();">View Larger Image</a> </body> </html> Hi everyone, I have some images that I want the user to be able to move around the page. So far, this script in the header allows me to do this: Code: var ie=document.all; var nn6=document.getElementById&&!document.all; var isdrag=false; var x,y; var dobj; function movemouse(e) { if (isdrag) { dobj.style.left = nn6 ? tx + e.clientX - x : tx + event.clientX - x; dobj.style.top = nn6 ? ty + e.clientY - y : ty + event.clientY - y; return false; } } function selectmouse(e) { var fobj = nn6 ? e.target : event.srcElement; var topelement = nn6 ? "HTML" : "BODY"; while (fobj.tagName != topelement && fobj.className != "dragme") { fobj = nn6 ? fobj.parentNode : fobj.parentElement; } if (fobj.className=="dragme") { isdrag = true; dobj = fobj; tx = parseInt(dobj.style.left+0); ty = parseInt(dobj.style.top+0); x = nn6 ? e.clientX : event.clientX; y = nn6 ? e.clientY : event.clientY; document.onmousemove=movemouse; return false; } } document.onmousedown=selectmouse; document.onmouseup=new Function("isdrag=false"); The body has this: Code: <img src="images/balloons.gif" class="dragme"> Now, to be able to use this image as a link, I would have to find the displacement between the mousedown and mouseup coordinates. If the displacement is below say 10px, then the mouseup would bring them to another page. I also wanted to make it so that if the mouseup occurs in a certain area of the page, that the image would move itself to a certain spot. I've programmed a lot before, but not in JavaScript. Any help would be much appreciated. (Note: I need this done in JavaScript, not Flash, even though it might be easier). Thanks Here is an extract of my coding Code: function displayTitle(name) { return name + " <a href='#' ><img src='direction.png' alt='Get driving directions'/></a>"; I have a map inserted into my aspx page. When I click on one icon, the name and the direction.png picture will appear as a pop up box within the map I want to make the direction.png picture into a link, whereby when I click on it, a pop up box will appear. How? First off thank you in advance to whomever decides to help out. I am having an issue where I am using lightbox, however what is showing up is a text link "Request Email." I understand how to manipulate this text to say anything I want. However, I am having difficulty changing the text link to an image. Instead of the text, I want to have an image (button) stored on my server http://www.something.com/something.jpeg be the link to click on instead of the text. It seems this would be easy to accomplish, but I cant figure it out. It anybody can send me in the right direction it would be appreciated. Thanks! [CODE] <a id='anchor_LU8eKAvs2W' href='http://www.emailmeform.com/builder/form/LU8eKAvs2W'>Request Email!</a><script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> <script type="text/javascript"> if (typeof jQuery == 'undefined'){ document.write(unescape("%3Cscript src='http://www.emailmeform.com/builder/js/jquery-1.4.4.min.js' type='text/javascript'%3E%3C/script%3E")); } </script> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script> <script type="text/javascript"> if (typeof $.ui == 'undefined'){ document.write(unescape("%3Cscript src='http://www.emailmeform.com/builder/js/jquery-ui-1.7.2.custom.min.js' type='text/javascript'%3E%3C/script%3E")); } </script> <link rel="stylesheet" type="text/css" href="http://www.emailmeform.com/builder/styles/dynamic.php?t=post" /> <script type="text/javascript" src="http://www.emailmeform.com/builder/js/dynamic.php?t=post&t2=0&use_CDN=true"></script> <script>$(function(){$('#anchor_LU8eKAvs2W').colorbox({width:'75%', height:'75%', iframe:true});})</script> [CODE] Hi guys, As a relative newcomer to Javascript this is killing me! Maybe someone can help... I am trying to put an image on the front page of my website that changes to one of two random images on mouseover. This part was easy, and has been done (I got the code from http://www.joemaller.com/javascript/randomroll.shtml). But what I am finding difficult is to make each image link to a different page. For example, if the user mouseovers the main image and sees the 'thumbs up' image, then clicks on it, they should be taken to the 'thumbs up' page. And if the user mouseovers the main image and sees the 'thumbs down' image, then clicks on it, they should be taken to the 'thumbs down' page. The site is he www.uninvitedcritic.com I think using 2 arrays is the way to go, but am not sure. Any help would be appreciated! Hi, i want to bring image download link to download a single image using like <a href="./images/sam.png">Download</a> when i click the download link it need to download plz help how can i download can finished Thanking you I have a php page which uses the following javascript code to open another page (The users profile page) and alos carry over the userID (dUid) Code: var userProfileUrl = chatProfileUrl+dUid.replace(/_/gi,""); document.getElementById('userdetails').innerHTML += "<span class='userinfo' onClick=\"window.open('"+userProfileUrl+"','"+dUid+"')\"><img id='profile' style='cursor:pointer;vertical-align:middle;padding-top:4px;' src=images/zoom.png> View Profile</span></br>"; I wanted to add to the menu another image link so I copied the same coding, but I do not know where to place the URL target that I want opened. I know I want the userID (dUid) also to follow this link as well. If I want the coding below to act in the same manner as the coding above, but instead open a page called /gift.php, where do I set the Url? Code: document.getElementById('userdetails').innerHTML += "<span class='userinfo' onClick=\"window.open('"+userProfileUrl+"','"+dUid+"')\"><img id='profile' style='cursor:pointer;vertical-align:middle;padding-top:4px;' src=images/gift.png> Send Gift</span></br>"; I'd like to create a website similar to http://www.picfog.com which displays images posted to Twitpic and Yfrog via Twitter. Could anyone help me with the following: Given a feed/list of messages containing links to images, display the images that are linked to. For example, take these two Twitter messages: omgsage: http://twitpic.com/cw3i3 - This is the cutest kitty ever ellievolia: Our evening! http://twitpic.com/cw3hx Using Javascript how do I extract the link part of each message, convert this to point to the actual thumbnail and then display the thumbnails on the web page? Thanks in advance! Hi there, I have a menu with 4 links and 4 images associated with them. By default, the image from link 1 is displayed on the page. I would like to change the image with its corresponding one, each time i mouseover one of the other three links. I'm trying to make the following code work unsuccesfully, i might be missing something. Any help will be appreciated. In the <head> section i have this: <script type="text/javascript"> img1 = new Image(); img1.src = "images/party/party.jpg"; img2 = new Image(); img2.src = "images/party/icecream.jpg"; img3 = new Image(); img3.src = "images/party/juice.jpg"; img4 = new Image(); img4.src = "images/party/videogames.jpg"; function change(num){ document.images["linkpic"].src = "img" + num } </script> </head> In the <body> i have: That's my default image <table> <tr> <td width="100"> <img src="images/party/balloon1.jpg" name="linkpic"> </td> <td width="260" valign="top" align="left"> <table> <tr><td><a href="Party1.html" onmouseover="change('1')">Party and Fun</a></td></tr> <tr><td><a href="Party2.html" onmouseover="change('2')">Icecream </a></td></tr> <tr><td><a href="Party3.html" onmouseover="change('3')">Juice </a></td></tr> <tr><td><a href="Party4.html" onmouseover="change('4')">Video Games </a></td></tr> </table> </tr> </table> </body> I would like when i point to Icecream, the picture on the left to change to the Icecream picture and so on. Any hints and help are appreciated! Thanks! Hi, I am working with the Cut & Paste JavaScript Slideshow which you can find on http://javascriptkit.com/script/script2/jsslide.shtml . The images are linked to a page on the Internet (click on image1 to go to "page1", click on image2 to go to "page2", etc.) which is a nice feature! However, the link opens in a new window. Could anyone tell me what I have to do to 'force' the link to open in the same window (target="_self")? Thank you for your help! I really appreciate it. WWWolf - Belgium |