JavaScript - Javascript Realtime Render?
So, I was wondering if the following is possible..
I want to use MathML or maybe javascript graphics and essentially create a real-time math preview. So I want to have a text box where you insert your source code, and I want the preview box to update automatically. For example, say I want the preview box to refresh every time the user enters a space character. Is there a way to get only the new source code entered to render in the preview box without having to re-render the entire preview every time? For example, if a user types 2x^3, I want the math equivalent to show up in the preview window. If a user then types in " + 2x" I want just the " + 2x" part to be drawn right next to the already-drawn "2x^3". Is this possible? Or is the only way to re-render the entire preview every time the user types in a new term? I would like to only change what the user has edited. If a user edits the middle of the math, then I have no choice and have to re-render everything after what the user has just edited, but when the user is editing the math at the very end, can I not just tag it on to the end and render just that little piece? Similar TutorialsI have a nice javascript slideshow but it kills the rendering speed of my home page. According to Yahoo performance guru(s), javascript gets run before other stuff is rendered, so you fix that by putting the js code "at the end" of the html file. Putting it at the end puts the slideshow at the bottom which is not the desired result. And even abs positioning is slave to the <div> structure. How do I nullify the flow just for this one thing (I don't want to make the whole page absolute). Or is there a better way to fix the performance issue. Thanks. Hello I am relatively new to java script. The code I have behaves differently when I debug it and when I just run is straight. There are three functions that one another in a particular sequence. When I debug it they get called in the correct sequence but otherwise they get called in a constant but random pattern. I know I am missing basic understanding of javascript Can some body help please. Thanks in advance Output when I open the page in a browser without debug. Code: Firebug's log limit has been reached. 0 entries not shown. Preferences readJSON2 There are no child objects inside parseJSON: There are no child objects GET http://10.208.137.92/js/v1/External/JSON/sample.json GET http://10.208.137.92/js/v1/External/JSON/sample.json 304 Not Modified 64ms jquery-1.6.2.js (line 7869) readJSON1 alerts [Object { alertPartnerDefinedInfos=[1], name="100 S.Ct. 1", more...}, Object { alertPartnerDefinedInfos=[1], name="100 S.Ct. 1", more...}, Object { alertPartnerDefinedInfos=[1], name="100 S.Ct. 1", more...}] Console Output when I debug Code: Firebug's log limit has been reached. 0 entries not shown. Preferences Firebug's log limit has been reached. 0 entries not shown. Preferences GET http://10.208.137.92/js/v1/External/JSON/sample.json GET http://10.208.137.92/js/v1/External/JSON/sample.json 304 Not Modified 111ms jquery-1.6.2.js (line 7869) readJSON1 alerts [Object { alertPartnerDefinedInfos=[1], name="100 S.Ct. 1", more...}, Object { alertPartnerDefinedInfos=[1], name="100 S.Ct. 1", more...}, Object { alertPartnerDefinedInfos=[1], name="100 S.Ct. 1", more...}] readJSON2 alerts [Object { alertPartnerDefinedInfos=[1], name="100 S.Ct. 1", more...}, Object { alertPartnerDefinedInfos=[1], name="100 S.Ct. 1", more...}, Object { alertPartnerDefinedInfos=[1], name="100 S.Ct. 1", more...}] inside parseJSON: alerts [Object { alertPartnerDefinedInfos=[1], name="100 S.Ct. 1", more...}, Object { alertPartnerDefinedInfos=[1], name="100 S.Ct. 1", more...}, Object { alertPartnerDefinedInfos=[1], name="100 S.Ct. 1", more...}] Javascript code Code: function populateSearchResults(alert){ var listOfAlertsDiv = document.getElementById('listOfAlertsDiv'); //var x = document.getElementById('rowTable').insertRow(0); //TODO: Replace the above code to remove Table declaration in above HTML. Instead use JQuery scrollbar and populate scroll area with the content below. // Create a new table. Add a row to it and then add the below cell to it. //TODO: Create a div // Create a table // Add the above created div to div1 var rowDiv = document.createElement('div'); rowDiv.className="scroll-content-item"; var rowContentTable = document.createElement('table'); rowContentTable.width="100%"; rowContentTable.border="0"; rowContentTable.cellpadding="0"; rowContentTable.cellspacing="0"; rowContentTable.summary="Row Content Table"; var rowContentTableFirstRow = rowContentTable.insertRow(0); var checkBoxCell = rowContentTableFirstRow.insertCell(0); checkBoxCell.width = "1%"; //x.valign = "top" //var checkBoxCell = x.insertCell(0); //checkBoxCell.width = "1%"; var checkBox = document.createElement('input'); checkBox.type = "checkbox"; checkBox.name = "checbox"; checkBox.value = "true"; checkBoxCell.appendChild(checkBox); var contentCell = rowContentTableFirstRow.insertCell(1); contentCell.width = "99%"; var contentTable = document.createElement('table'); contentTable.style.border = '1'; contentTable.cellPadding = '0'; contentTable.cellSpacing = '0'; contentTable.width = "100%" var titleRow = contentTable.insertRow(0); var titleCell = titleRow.insertCell(0); titleCell.width = "70%"; titleCell.id = "alertTile" var title = document.createElement('a'); title.href = "http://www.google.com"; title.id = "AlertResultNameLink"; titleText = document.createTextNode(alert.name); title.appendChild(titleText); titleCell.appendChild(title); var moveToFolderCell = titleRow.insertCell(1); moveToFolderCell.width = "5%"; moveToFolderCell.id = "moveToFolder"; var moveToFolderCellImage = document.createElement('img'); moveToFolderCellImage.alt = "Move To Folder"; //TODO: Change the hardcoding of the image location to symbolic links moveToFolderCellImage.src = "/js/v1/Alerts/images/co_documentFooterArrowFirst_inactive.png" moveToFolderCellImage.border = 0; moveToFolderCellImage.className = "moveToFolder"; moveToFolderCell.appendChild(moveToFolderCellImage); var editAlertCell = titleRow.insertCell(2); editAlertCell.width = "10%"; var editAlertButton = document.createElement('a'); editAlertButton.href = "http://www.google.com"; editAlertButton.className = "EditAlertButton"; var editAlertButtonImage = document.createElement('img'); editAlertButtonImage.alt = "Edit Alert"; //TODO: Change the hardcoding of the image location to symbolic links editAlertButtonImage.src = "/js/v1/Alerts/images/co_overlayBox_closebutton.png"; editAlertButtonImage.border = 0; editAlertButtonImage.className = "EditAlert"; editAlertButton.appendChild(editAlertButtonImage); var editAlertButtonText = document.createTextNode(' Edit Alert '); editAlertButton.appendChild(editAlertButtonText); //editAlertButton.innerHTML = " Edit Alert " editAlertCell.appendChild(editAlertButton); var alertMetaDataRow = contentTable.insertRow(1); var alertMetaDataCell = alertMetaDataRow.insertCell(0); var alertMetaDataTable = document.createElement('table'); alertMetaDataTable.width = "100%" var alertMetaDataTableRow = alertMetaDataTable.insertRow(0); alertMetaDataTableRow.width = "100%" var lastUpdateCell = alertMetaDataTableRow.insertCell(0); lastUpdateCell.width = "25%" //var lastUpdateCellText = document.createTextNode("Last Update:"); var lastUpdateCellText = document.createTextNode("Last Update: " +alert.lastRunDate); lastUpdateCell.appendChild(lastUpdateCellText); var nextUpdateCell = alertMetaDataTableRow.insertCell(1); nextUpdateCell.width = "25%" var nextUpdateCellText = document.createTextNode("Next Update:"); nextUpdateCell.appendChild(nextUpdateCellText); var clientIdCell = alertMetaDataTableRow.insertCell(2); clientIdCell.width = "50%" var clientIdCellText = document.createTextNode("Client ID: ") clientIdCell.appendChild(clientIdCellText); alertMetaDataCell.appendChild(alertMetaDataTable); var descriptionRow = contentTable.insertRow(2); var descriptionCell = descriptionRow.insertCell(0); var descriptionTitle = document.createTextNode("Description: "); descriptionCell.appendChild(descriptionTitle); var activeDeliveryRow = contentTable.insertRow(3); var activeDeliveryCell = activeDeliveryRow.insertCell(0); var activeDeliveryTitle = document.createTextNode("Active Delivery"); activeDeliveryCell.appendChild(activeDeliveryTitle); var rss1 = document.createElement('img'); rss1.style.border = "0"; rss1.src = "images/rssIcon.png"; rss1.hspace = "4"; activeDeliveryCell.appendChild(rss1); var rss2 = document.createElement('img'); rss2.style.border = "0"; rss2.src = "images/rssIcon.png"; rss2.hspace = "4"; activeDeliveryCell.appendChild(rss2); var rss3 = document.createElement('img'); rss3.style.border = "0"; rss3.src = "images/rssIcon.png"; rss3.hspace = "4"; activeDeliveryCell.appendChild(rss3); var rss4 = document.createElement('img'); rss4.style.border = "0"; rss4.src = "images/rssIcon.png"; rss4.hspace = "4"; activeDeliveryCell.appendChild(rss4); contentCell.appendChild(contentTable); rowDiv.appendChild(rowContentTable); listOfAlertsDiv.appendChild(rowDiv); contentCell.appendChild(document.createElement('br')); contentCell.appendChild(document.createElement('hr')); contentCell.appendChild(document.createElement('br')); } function readJSON(){ var json = ""; //$(document).ready(function(){ $.getJSON("/js/v1/External/JSON/sample.json", function(data){ json = data; console.log("readJSON1"); console.dir(data); }); //}); console.log("readJSON2"); console.dir(json); return json; } function parseJSON(){ var alerts = []; var json = readJSON(); console.log("inside parseJSON:"); console.dir(json); //TODO: Check if JSON is not null. for(var i in json.alerts){ var createdDate = new Date(json.alerts[i].createdDate); var alert = new Cobalt.Alerts.DataTypes.Alert(); var AlertPartnerDefinedInfos = []; alert.name = json.alerts[i].name; alert.lastRunDate = $.format.date(new Date(json.alerts[i].lastRunDate),"MM/dd/yyyy hh:mma"); alerts.push(alert); } //console.log("fillRows: " +alerts.length); return alerts; } $(document).ready(fillRows=function(){ var alerts = parseJSON(); //console.log("fillRows: " +alerts.length); for(i=0;i<alerts.length;i++){ var alert = alerts[i]; populateSearchResults(alert); } }); hello... I'm sorry, i did read the advises, and i've been through the forum, trying to figure out where to look... but i dont know where to find it... so, i'm sorry if my help request will sound silly,,, i'm only looking for someone that will want to point me in the right direction... and i'll try to do my best on my own ... we want to offer personalized tshirts... so we do need a way for the customer to choose size, color, subject and text and check all this in real time... someone that is doing something that we want is http://www.vistaprint.com/embroidere...aspx?xnav=top# in your opininion, is that vistaprint application a java? pls, could you point me in the right direction to understand that? thanks to anyone that will want to help me favorite I'd like to modify a form on www.formsite.com (form builder app): username: testuser password: password I would like to use the nicedit.com's inline content editor's js to transform my textarea's into a richtext area. At present the nicedit editor works well in creating the richtextarea. However, the KEY point is that I would like formsite's form to pipe in the the created html and render it with the html component of formsite. Currently, the pipe function in formsite will only put out the html syntax in it's html module. action seen he http://fs8.formsite.com/testform/form1/index.html So this would be: 1. checking out my form on formsite.com 2. the script from nicedit.com is already installed in an html component. 3. changing or telling me the scripts/tags/or whatever for formsite form using formsites form builder (which allows some html/script editing). 4. changed so as to render the rich text entered on page 1 in page 2 instead of the html syntax. Any other solutions using formsite and any other richtextarea solutions would be great too! Hello I've been struggling trying to get a small order form to work the way I want it to. Here is a link to the live page: http://www.watphotos.com/introductio...otography.html And here is the code in question: Code: <script src="js/jquery-1.4.2.min.js" type="text/javascript"></script> <script type="text/javascript" charset="utf-8"> $(document).ready(function(){ var initial = 0 var total = 0; var services = 0; function addServices() { initial = 150 total = initial services = 0; $("input:checked").each(function(){ value = $(this).attr("value"); services += parseInt(value); }); } $(function() { addServices(); total += services; $("form").before('<p class="price"></p>') $("p.price").text("Total Price: US$" + total); }); $("input:radio, input:checkbox").click(function () { addServices(); total += services $("p.price").text("Total Price: US$" + total); }); }); </script> I have two questions... Question 1 How can I make this piece of script act a little smarter. Look at the order form, I'm catering for up to 4 people and providing lunch for them. If they select 3 people and the spaghetti bol for lunch, it's only adding $10 where it should be adding $30. Obviously this is simple multiplication but since the values in my form are prices it makes it a little tricky. I'm guessing an onselect on the first part of the form which changes the pricing of the other items would be the way to go, but how do I do this? Question 2 The "Total Price" is placed before the <form> tag by the script. This is ok but it's not where I want it. How can I position this text elsewhere in the document? Thanks in advance! Hello, I am trying to use .innerHTML to replace an image with an embedded flash file. Here is my code... HTML: Code: <a href="#" onclick="funt1(); return false;">do it to it</a><br><br> <span id="embed"><img src="video%20convert%20zone/zerotime.png"></span> JavaSscript: Code: <script type="text/javascript"> function funt1(){ document.getElementById('embed').innerHTML='<object width="100" height="40"><param name="movie" value="video%20convert%20zone/video.swf"></param><embed src="video%20convert%20zone/video.swf" width="100" height="40" name="player" id="player" menu="false" loop="false" bgcolor="#000000" wmode="transparent" type="application/x-shockwave-flash"></embed><param name="loop" value="false"></param><param name="menu" value="false"></param><param name="bgcolor" value="#000000"></param><param name="wmode" value="transparent"></param></object>'; return false; } </script> And for some reason in Internet Explorer when I click the "do it to it" link, the image just disappears, and object and embed don't appear. But it works in Firefox. Any suggestions? Hello, this is my first post. I've been looking for a script to render HTML code into an accurate PNG file. I found this kind of function at http://www.mecabricks.com/en/workshop/ - when pressing the camera button. And also http://html2canvas.hertzen.com/ - but the documentation is not enough so I just can't get it to work... I was wondering if anyone could help me to get it going? Kind regards, P I want to have another go at Javascript. I have several books on the subject but I find that my eyesight is a major problem. Therefore I want to try an on-line solution, preferably free. I have Googled, but there are so many that I am almost dizzy with the choices. Perhaps someone could recommend one. Not too fussy visually. My knowledge is VERY basic. Frank Hello! I am trying to find a script that allows you to open multiple browser tabs and then close each of those tabs, either one by one or all at once. Does anyone know how to do this please? Thanks so much for your help. Does anyone know how to make URL links that use Javascript still work when users have Javascript disabled on their browser? The only reason I'm using JS on a URL is because my link opens a PDF file, and I'm forcing it not to cache so users have the latest version. I tried the <script><noscript> tags, but I'm not sure if I'm using it correctly, as my URL completely disappears. Below is my HTML/Javascript code: <p class="download"> <script type="text/javascript">document.write("<span style=\"text-decoration: underline;\"><a href=\"javascript:void(0);\" onclick=\"window.open( 'http://www.webchild.com.au/mediakit/Direct_Media_Kit_Web.pdf?nocache='+ Math.floor( Math.random()*11 ) );\" >The Child Magazines Media Kit</a></span> (PDF 1 MB) ");</script> <noscript><span style="text-decoration: underline;"><a href="http://www.webchild.com.au/mediakit/Direct_Media_Kit_Web.pdf" >The Child Magazines Media Kit</a></span> (PDF 1 MB)</noscript> </p> Thanks for any help, Michael Hi Guys, I am new at JavaScript and start to do some tutorials.What I am trying to do here is prompting user to input a name and if the name was valid the page(document) will display with all objects like the button.But if user enter a wrong name then the button will be disabled! I create the following code but it did not work <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>New Web Project</title> <script language="JavaScript" type=""> function changeColor(){ document.bgColor = "Gray"; } </script> </head> <body> <script language="JavaScript" type="text/javascript"> var person = ""; person = prompt('What is Your Name:'); if (person == "Foo") { document.write("<h1 />Welcome " + person); document.bgColor = "Yellow"; } else { document.write("<h1 />Access Denied!!!!"); document.bgColor = "Red"; document.getElementById("gree").disabled = true; } </script> <div> <p/><input id="gree" type="button" value="Gray " onClick="changeColor();"> </div> </body> </html> as you can see I used the: document.getElementById("gree").disabled = true; but it did not work , could you please give an idea how I can solve this problem? Thanks Hi, I have the following code snippet: test.html ====== <script language="javascript" type="text/javascript"> var testVariable = "test"; </script> <script language="javascript" type="text/javascript" src="test.js"> </script> test.js ===== var testVariable = window.top.testVariable; In firefox, I'm able to access testvariable defined within test.html in test.js. But in chrome, test.js couldnot get the window.top.testVariable field defined in test.html. Can any one please let me know how i can make it work in chrome?. Am i missing something here?. Hey, I've got to make the values of some textboxes change the co-ordinates of my sprite on a canvas and havent a clue on how to do it, Here is my form with the two textboxes and submit button: <form> x: <input type="text" name="x" /><br /> y: <input type="text" name:"y" /><br /> <input type="submit" value="Submit"/><br /> </form> And i need it so that they change the values of these: //this shows where my sprite will start on the canvas var block_x; var block_y; searched the internet for hours and cant really find anything i understand or works. any help is much appreciated Hi Guys I am trying to modify the functionality of my page. I want to be able to activate this piece of code using another javascript function. This is the code I want to activate: Code: <script type="text/javascript"><!-- $('#button-cart').bind('click', function() { $.ajax({ url: 'index.php?route=checkout/cart/update', type: 'post', data: $('.product-info input[type=\'text\'], .product-info input[type=\'hidden\'], .product-info input[type=\'radio\']:checked, .product-info input[type=\'checkbox\']:checked, .product-info select, .product-info textarea, .date_data input[type=\'text\']'), dataType: 'json', success: function(json) { $('.success, .warning, .attention, information, .error').remove(); if (json['error']) { if (json['error']['warning']) { $('#notification').html('<div class="warning" style="display: none;">' + json['error']['warning'] + '<img src="catalog/view/theme/default/image/close.png" alt="" class="close" /></div>'); $('.warning').fadeIn('slow'); } for (i in json['error']) { $('#option-' + i).after('<span class="error">' + json['error'][i] + '</span>'); } } if (json['success']) { $('#notification').html('<div class="success" style="display: none;">' + json['success'] + '<img src="catalog/view/theme/default/image/close.png" alt="" class="close" /></div>'); $('.success').fadeIn('slow'); $('#cart_total').html(json['total']); $('html, body').animate({ scrollTop: 0 }, 'slow'); } } }); }); //--></script> And this is how I want the format of the function to be: function testsession() { if there is a session called 'hiredate' { activate the script above } else { var el = document.getElementById("product_data"); } } I just dont know how to write this in javascript Could you help me if possible please I got an index.php Code: <html> <form action="bacakomik.php" method='post'> <select name="kodekomik"> <option value='../komik1/|23'>Judul Komik1</option> <option value="../komik2/|20">Judul Komik2</option> <option value="../komik3/|10">Juduk Komik3</option> <option value="../komik4/|20">Judul Komik4</option> </select> <input type="submit" /> </form> <?php echo ('<select>'); echo ('<option value= "'.$i.'">'.'Page '.$i.'</option>'); echo ('</select>'); ?> </html> As you can see, each of the option brings specific value "../komik1/|23" komik1 is a directory | is a delimiter 23 is the pages in one chapter and can be considered also as how many images are there on a specific directory This is my bacakomik.php Code: <?php $dirkomik = $_POST['kodekomik']; $exploded = explode("|", $dirkomik); echo ($exploded[0]); //picture directory echo ("<br>"); echo ($exploded[1]); //total page in the comic $pagecount = (int)$exploded[1]; //Take last posted value, process it right away echo ('<FORM name="guideform"> '); echo ('<select name="guidelinks">'); $i=1; do { echo ('<option value= "'.$i.'">'.'Page '.$i.'</option>'); $i= $i+1; }while($i <= $pagecount); //Printing option and select echo ("</select>"); ?> <input type="button" name="go" value="Go!" onClick="document.getElementById('im').src=document.guideform.guidelinks.options[document.guideform.guidelinks.selectedIndex].value+'.png';"> </FORM> <img src="img0.jpg" id="im"> With the current code on bacakomik.php, I only can change the img src of id "im" in the same directory only. What I want is that the Javascript could "add" the "$exploded[0]" variable so that the picture can be loaded from different directory. Anyone can do this? I believe that the fix should be somewhere on input tag inside OnClick, or do you know where? Anyway, I found this on the net http://p2p.wrox.com/php-faqs/11606-q...avascript.html Please help me to those who can... I want to insert this js snippet Code: function addText(smiley) { document.getElementById('message').value += " " + smiley + " "; document.getElementById('message').focus(); return false; } to a loaded iframe with name&id chtifrm. I can access it & change embed something in its html via using something like: Code: $(parent.chtifrm.document.body).append('<div id=\"smly\" style=\"cursor:pointer;float:left;top:200px;display:none;position:absolute;\"><\/div>'); .... Code: parent.chtifrm.document.getElementById('chatbox_option_disco').style.display == 'none' but how do I insert js in the head of loaded iframe? All -- I have a JavaScript config file called gameSetting.js which contains a bunch of variables which configures a particular game. I also have a shared JavaScript library which uses the variables in gameSetting.js, which I include like so: <script type="text/javascript" src="gameSetting.js" ></script> <script type="text/javascript" src="gameLibrary.js" ></script> In gameSetting.js I have: $(document).ready(function() { // call some functions / classes in gameLibrary.js } in Firefox, Safari, and Chrome, this works fine. However, in IE, when it's parsing gameSetting.js, it complains that the functions that live in gameLibrary.js aren't defined. When it gets to parsing gameLibrary.js, the variables in gameSetting.js are reported as not being defined. I've tried dynamically bootstrapping the gameLibrary file using this function in document.ready for dynamic load... $.getScript("gameLibrary.js"); However, the same problem still happens in IE, where when it parses the files individually it's not taking into context the file/variables that came before, so it's not an out of load order problem. My options a 1) collapsing all the functions in gameLibrary.js and variables in gameSetting.js into one file. However, this is not practical because this is dealing with literally hundreds of games, and having a gameLibrary.js in ONE location for ONE update is what makes most logical sense. 2) figure out a way to get this to work where variables in file1 are accessible to file2 in IE (as it seems they are in other browsers). jQuery seems to be able to have multiple plugins that all refer to the based jQuery-1.3.2.js, so I know there is a way to get this to work. Help appreciated. Nero I wrote a log function that took note of various function calls. Thinking that functions are first class objects, and objects have properties, I made the name of each logged function a property of that function, e.g., brightenInnerPara.name = "brightenInnerPara"; Every browser I tried (Firefox, MSIE, Opera, Chrome, Safari) accepted the assignment, no problem. In Firefox and MSIE, the result was what I wanted: brightenInnerPara.name == "brightenInnerPara" But in the others, the result was: brightenInnerPara.name == null Question 1. Which Javascript is correct here? I favor Firefox and MSIE, not merely because they were willing to give me what I wanted, but also because it makes no sense to accept an assignment statement without throwing an error and then give it a null semantics, like Chrome, Opera, and Safari did. I found a workaround, using assignments like this: brightenInnerPara.prototype.name = "brightenInnerPara"; To my surprise, that worked in every browser. But I don't know why. It seems that such assignments are enough to cause each function to have its own distinct prototype. Question 2. Just how inefficient is my workaround, and why does it work? I designed a simple mobile in html , i want to link it to strings such that.... example : there are numbers from 0 to 9 and when ever i click on a number and then click on another after all the click i made and at last when i click on the " dial" (for example purpose) it should prompt all the numbers in sequence where i click. example to make it clear for my purpose : 1 2 3 4 5 6 7 8 9 * 0 # Dial (button) I clicked on "4" then "6" then "9" and then i hit the "dial" button the it shold show an alert box displaying "469" . I think it isn't a big challenge for you javascript coders. Please post the whole javascript code for this function, also the id's defined to the html separetly by you I am just learning and up on queries , so want your help Thaks a ton Hello i just started learning and therefore am in the basics but i need help.. Forgive me if i sound dumb and stupid =X Hello and thx for reading.. How do i use javascript to switch an image when the mouse clicks an image map? for example if i have an image with 3 divided mapped parts and i click one map.. the whole image changes into one with the first mapped part decorated.. a sort of navigation bar I also want to, on click of one part, to display an image and on click of a second part to display another image in a table below. .. please help.. thank you ---------------------------------edit--------------------------------------------- i got most of it working.. but when i use onclick.. the image changes but it isnt permenant.. how do i make it permanant until i click another map part |