|
JavaScript - Need To Both Swap To Larger Img (in Next Column) And Click To New Page
New to JavaScript so PLEASE bear with me. Trying hard to learn. My client specifically asked for a type of menu (scroll over a thumbnail and you see a large photo in the column next to it. And of course the thumbnail is clickable to new page. I am using this Jeremy Keith script:
PHP Code: /* This script and many more are available free online at The JavaScript Source!! http://javascript.internet.com Created by: Jeremy Keith / Anonymous | http://www.alistapart.com/articles/imagegallery/ */ function showPic(whichpic) { if (document.getElementById) { document.getElementById('placeholder').src = whichpic.href; if (whichpic.title) { document.getElementById('desc').childNodes[0].nodeValue = whichpic.title; } else { document.getElementById('desc').childNodes[0].nodeValue = whichpic.childNodes[0].nodeValue; } return false; } else { return true; } } var previousToggle=null; function toggleMe(a){ var e=document.getElementById(a); if(!e)return true; if(e.style.display=="none"){ e.style.display="block"; if(previousToggle)previousToggle.style.display="none"; previousToggle=e; } return true; } and it works fine, except that I can't figure out how to make it showpic on mouseover and still go to new URL (basic link to a page) onclick. Here's a link (one of 8)in the body: PHP Code: <a onmouseover="toggleMe('para1'); showPic(this); return false;" href="design.html" title="blah blah blah"> <img src="images/pix_smaller3.jpg" width="70" height="70"></a> It either links to new page with the href="design.html", or swaps in larger pic if I href to the img file, but I can't seem to get BOTH to work. I obviously want the <a> to be to a new page, not the larger img. Shouldn't showPic take care of this? Where is showPic getting its imgs from? I know that this can't be that complicated, but I have been up for 2 nights trying to figure this out. Any help appreciated... Similar TutorialsSo I want to swap an image when it's clicked on (and then swaps right back after release) and currently I have working code for this, HOWEVER (and the reason for my post) I want this to be a redundant image, so it would be the same image used about 25 times on the page (same image, with same image swap effect) it's basically a download button then slightly changes it's style when clicked on. The problem is that my current code requires me to give each image it's own specific id / name and I have to recreate more sript code for each image id as well. The following example code would be what is currently required for just 2 images (they are the exact same image with exact same swap) but as you can see for every additional download button on the page I have to add a new id for it and a bunch of additional code, so it's quite ridiculous as to how much code is required for 25 of the exact same images on the page. in the header I have: Code: <script language="JavaScript">
<!--
// PRELOADING IMAGES
if (document.images) {
downloadbtn_down=new Image(); downloadbtn_down.src="images/download_pressed.png";
downloadbtn_up =new Image(); downloadbtn_up.src ="images/download.png";
}
if (document.images) {
downloadbtn2_down=new Image(); downloadbtn2_down.src="images/download_pressed.png";
downloadbtn2_up =new Image(); downloadbtn2_up.src ="images/download.png";
}
// EVENT HANDLERS
function pressButton(btName) {
if (document.images)
eval('document.'+btName+'.src='+btName+'_down.src');
}
function releaseButton(btName) {
if (document.images)
eval('document.'+btName+'.src='+btName+'_up.src');
}
//--></script>
and for each image in the body I have (example is for 2 images): Code: <a href="indexpg.htm"
onMouseDown="pressButton('downloadbtn');return true;"
onMouseUp="releaseButton('downloadbtn');return true;"
onMouseOut="releaseButton('downloadbtn');return true;"
onClick="return true;"
><img id=downloadbtn width=422px height=80px border=0
alt="Download"
src="images/download.png"
></a>
<a href="indexpg.htm"
onMouseDown="pressButton('downloadbtn2');return true;"
onMouseUp="releaseButton('downloadbtn2');return true;"
onMouseOut="releaseButton('downloadbtn2');return true;"
onClick="return true;"
><img id=downloadbtn2 width=422px height=80px border=0
alt="Download"
src="images/download.png"
></a>
I want to be able to just use the same piece of code without having to add a new id for every download button on the page and tons of redundant code, especially since the image is the same it doesn't make sense to have to give each one a specific id and specific javascript for each of those id's. I would think this would be quite simple, but I know nothing about javascript, and I have searched a lot without any luck. PLEASE HELP ME! Ok. I'm going to start by saying I'm a complete novice. I am having a hell of time finding specific codes for the things I need. I'm pretty impressive I've gotten this far. So I am trying to make a portfolio website, for myself, which has thumbnails on the left(which I'll crop in photoshop because it is easier for me than having to do any coding) which will make the main image on the right change. At the same time, I want it to change the text below to correspond to the current image. Now I have the images swapping alright, except that the thumbnails that have the onClick function in them won't sit inside the table I have inside the table. I don't understand why that happens. I can work around this, and just get rid of that table. Another problem is that even though I defined the collumns as each being 20%, they are not all the same size. I am using percentages so that the site will function regardless of screen resolution. Anyway, here is my current code. Ignore the image names, I'm just using what random images I have at hand while I test things out. Code: <html>
<head>
<script type="text/javascript">
function swap(image) {
document.getElementById("main").src = image.href;
}
</script>
</head>
<body>
<table width="80%" align="center">
<tr><td colspan="5">I'll put a header image here.</td>
</tr>
<tr>
<td width="20%"><center>Print</center></td>
<td width="20%"><center>Motion</center></td>
<td width="20%"><center>Photo</center></td>
<td width="20%"><center>Misc</center></td>
<td width="20%"><center>Resume</center></td>
</tr>
<tr>
<td colspan="2"><table align="left">
<td colspan="100%">Catagory 1
</td>
<tr>
<a href="mario.jpg" onClick="swap(this); return false;"><img src="../Jpg/sluticon.jpg"></a>
<a href="../Jpg/cattits.jpg" onClick="swap(this); return false;"><img src="../Jpg/sluticon.jpg"></a>
<a href="bowie.jpg" onClick="swap(this); return false;"><img src="../Jpg/sluticon.jpg"></a>
</tr>
<td colspan="100%">Catagory 2
</td>
<tr>
<td><img src="../Jpg/sluticon.jpg" /></td>
<td><img src="../Jpg/sluticon.jpg" /></td>
</tr>
</table></td>
<td colspan="3">
<img id="main" src="bowie.jpg" width="400">
</td>
</tr><td colspan="5">
<p>Description goes here</p></td>
<tr>
</tr>
</table>
</body>
</html>
Hi, 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. have a div & a grid i want the div to be displayed on the column header click & be positioned with the specific column suppose 3rd grid header column is clicked the div shld be positioned near 3 column hi all. i'm still newbie with programming. i have created a table with two columns with a list of scholarship and a read more link. this is the table that i made: what i want to do is to hide the second column if the user click the "read more" in first column and hide the first column when the user click the "read more" in second column. if the user click "read less" it will show both column back like normal. i try to use the javascript for hide column but it cannot link with my "read more" script. i hope that anyone can help me. thanks in advance I want to implement a javascript function where a submit button will be submitted from the parent page each time I close a child page. Please let me know what I did wrong in my code and please elaborate your answer so that I could understand it better. Thank you so much for your help. I have the following jscript code but it is now working. Code: window.onunload = submitParent;
function submitParent()
{
var doc = window.opener.document,
theForm = doc.getElementById("finalForm");
theField = doc.getElementById("finalSelected");
theForm.submit();
theField.trigger('click');
}
My form from the parent page is as follow. I want my jscript to just click on the submit button once. Code: <form id = "finalForm "name= "finalForm" method="POST" action=""> <input type="Submit" id = "finalSelected" name="finalSelected"/> Hello, I don't know if this can be done in Javascript, or requires any other language but i was wondering if this would be possible. I would like to embed this Javascript code in to a PHP file and then for it to run automatically upon the PHP file loading: Code: <td class="smallDesc"> <a name="fb_share" type="button_count" href="http://www.facebook.com/sharer.php">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script> </td> The Javascirpt is the Facebook Share button that basically allows users that have Facebook to share the page there currently on in their Facebook status by pressing the button, but if there not logged in it shows the login page, not a problem just continue the script. The current button i which is what i want to load automatically in the PHP file is located here, to test the functionalilty just click "Share" button in blue.. http://watch-movies-online.anyfilman...-Movie-17.html To summarise, i would like the above Javascript code to execute automatically upon pageload of this PHP file.. http://www.watch-movies-online.anyfi...p://google.com. If that could be done, and if this also is possible.. i would like for the "Share" button on the external page that is loaded from the Javascript code above to be clicked automatically so in effect when ever someone visits the PHP page after clicking "Click Here to Watch/Stream 2012 Online For Free" on this page it will automatically load the Facebook Share box, and automatically click the "Share" Button and then close the page if possible, but not required. Please feel free to ask any questions, i'll be happy to answer. Thanks in advance. Best Regards, Jonathan. Hi, Im looking for help, I have been looking for a script like the following. Code: http://tools.th3-0utl4ws.com/admin-finder/ Where a visitor must click each link before accessing the website. Can any one help me please. Thanks in advance. Hi well my problem is.. how do i hide the popup list.. i would like to if the user click outside of that div element.. the popup div will hide.. but whenever i select the body or the id containing that popup div.. the whenever i click the down arrow button.. it shows the popup div.. but then closes again.. because of the selector hide on the container div.. http://development.andrewfopalan.com/devpage/test.html here's the test page.. when i click the down arrow.. it shoes the popup.. how to do if i want that any click outside that popup element.. i will call the hide/fadeout for the popup element.. please help.. tried various things.. just a shed of light will do.. thanks Hi, I have a page with an iframe in it. I need my script to search the contents of the iframe for a specified string, and click the link within it. Here is my coding. Code: <script>
setTimeout(function() { window.location.reload(); }, 2000); // 2 seconds, e.g.
$(document).ready(function() {
$('a[href*="13468100"]', $("game").contents()).closest('tr').find('.fightActionInnerInner').parent("a").trigger("click");
});
</script>
</head>
<body>
<iframe src="http://vl.storm8.com/hitlist.php" width="100%" height="800px" id="game"></iframe>
In the post below is the content of the iframe. At the moment the script doesn't want to click the link, it just refreshes the page. Can anyone advise? I'm looking for code which does the following: When a visitor visits my website and clicks anywhere on the page, (regardless of where the mouse clicks) it will automatically redirect him to another site. I think an event listener might be a solution, but I'm not sure. Thanks a lot for any help on this If possible, I would like there to be a 2 second time delay before it does the redirection. Hey all, I'm trying to make it so that when a user clicks on a radio button, the image that is related to the radio button is displayed next to it (without reloading the page). At the moment all it shows is the image related to the currently saved option, which I'd like to keep on page load. Is this possible? If so, I'd appriciate any help. Here is my code for the radio buttons. Thanks. Code: <tr valign="top">
<td id="community-legal-services-logo-selection">
<p><label><?php _e('<strong class="table_tags">Display the following Community Legal Services logo:</strong>'); ?></p>
<p><label for="cls-mono">
<input class="" id="cls-mono" name="cls_logo" type="radio" value="cls_mono" <?php if($general_options['cls_logo'] === 'cls_mono'){ echo 'checked="checked"'; } ?> />
<?php _e('Mono'); ?></label>
</p>
<p><label for="cls-color">
<input class="" id="cls-color" name="cls_logo" type="radio" value="cls_color" <?php if($general_options['cls_logo'] === 'cls_color'){ echo 'checked="checked"'; } ?> />
<?php _e('Colour'); ?></label>
</p>
<p><label for="cls-none">
<input class="" id="cls-none" name="cls_logo" type="radio" value="cls_none" <?php if($general_options['cls_logo'] === 'cls_none'){ echo 'checked="checked"'; } ?> />
<?php _e('None'); ?></label>
</p>
<p>
<label><?php _e('<span class="table_tags">Link to the Community Legal Services website<span>'); ?></label>
</p>
<p>
<input class="large_input_box" id="cls-link" name="cls_link" type="text" value="<?php echo $general_options['cls_link']; ?>" /></label>
</p>
</td>
<?php if($general_options['cls_logo'] && $general_options['cls_logo'] !== 'cls_none'){ ?>
<td>
<img id="community-legal-services-logo-preview" class="image-preview" src="<?php echo $general_options['cls_logo_path']?>" />
</td>
<?php } ?>
</tr>
Hi. Please help. I have a credit card donation page and what I wanted to do is after they click the submit button and transaction is successfult I wanted to capture the donation amount they enter from the donation page and show it to the next page. I know that is possible but I just don't know how to do it. I am new in Javascript and still consider as a baby. Can someone please help? Thanks in advance.
I would like to take a series of images and paste them into a final larger image before displaying it to the user. From what I've read there are libraries that use HTMLcanvas that could achieve this but they don't work even with newer versions of IE. I was wondering if there were functions similar to the PHP image editing functions that work with newer versions of IE? Cheers. OK, so I've written a small timer at http://zeroerror.co.uk/public/cubetimer.php for general purpose timing. My first is that I cannot find a way to accurately time with the format 00:00.00, as the milliseconds seem to run too slowly. My second is that when the font size is set to a large size (for example, 200px or 300px) the timer runs even more slowly (just over half the speed it should). Is there any way to optimise the timer so it runs at a more accurate speed, or is this just a problem with my browser parsing the Javascript in time? Here's the code: Code: function timeIt()
{
init = 1;
if (countMsL == 9)
{
countMsL = 0;
if (countMsU == 9)
{
countMsU = 0;
if (countSecs == 59)
{
countSecs = 0;
countMins++;
}
else
{
countSecs++
}
}
else
{
countMsU++;
}
}
else
{
countMsL++;
}
displayMsL = countMsL;
displayMsU = countMsU;
if (countSecs < 10)
{
displaySecs = '0' + countSecs;
}
else
{
displaySecs = countSecs;
}
if (countMins < 10)
{
displayMins = '0' + countMins;
}
else
{
displayMins = countMins;
}
readout = displayMins + ':' + displaySecs + '.' + displayMsU + displayMsL;
timerDisplay.innerHTML = readout;
timerActual = setTimeout('timeIt()', 10);
}
Thanks in advance! So i purchased a template from template monster for wordpress. http://www.templatemonster.com/demo/28861.html On the front page when you click on the thumbnail it changes the big image in the middle. I can't figure out how for the life of me to make that image also a link. My main problem is the code below. img_b1.jpg is the full size image and image_1.jpg is the thumbnail image. When you click on the thumbnail it changes the big image in the middle. When I add a clickable href=" to the main image it breaks the whole chain. --------------------------------------------------------------------- <a class="thumb" name="leaf" href="<?php bloginfo('stylesheet_directory'); ?>/images/img_b1.jpg" title="Agrocore"> <img src="<?php bloginfo('stylesheet_directory'); ?>/images/img_1.jpg" alt="Agrocore" /> </a> ------------------------------------------------------------------------ Full code below <div id="thumbs" class="navigation"> <ul class="thumbs noscript"> <li> <a class="thumb" name="leaf" href="<?php bloginfo('stylesheet_directory'); ?>/images/img_b1.jpg" title="Agrocore"> <img src="<?php bloginfo('stylesheet_directory'); ?>/images/img_1.jpg" alt="Agrocore" /> </a> <div class="caption"> <div class="indent1">living set </div> <div class="image-desc">Cool looking but extremely functional and comfortable. The colours black and white dominate throughout.<br /> Sleek and stylish interior to suit your taste.</div> <div class="indent"><h4>Contemporary</h4></div> </div> </li> <li> <a class="thumb" name="leaf" href="<?php bloginfo('stylesheet_directory'); ?>/images/img_b2.jpg" title="ProClinique"> <img src="<?php bloginfo('stylesheet_directory'); ?>/images/img_2.jpg" alt="ProClinique" /> </a> <div class="caption"> <div class="indent1">in grey</div> <div class="image-desc">Luxury living is being redefined and emphasis is being laid on comfortable living, without compromising on style, modest in the color codes</div> <div class="indent"><h4>Sitting room </h4></div> </div> </li> <li> <a class="thumb" name="leaf" href="<?php bloginfo('stylesheet_directory'); ?>/images/img_b3.jpg" title="Beauty"> <img src="<?php bloginfo('stylesheet_directory'); ?>/images/img_3.jpg" alt="Beauty" /> </a> <div class="caption"> <div class="indent1">living set </div> <div class="image-desc">Cool looking but extremely functional and comfortable. The colours black and white dominate throughout.<br /> Sleek and stylish interior to suit your taste.</div> <div class="indent"><h4>Contemporary</h4></div> </div> </li> <li> <a class="thumb" name="leaf" href="<?php bloginfo('stylesheet_directory'); ?>/images/img_b4.jpg" title="Market"> <img src="<?php bloginfo('stylesheet_directory'); ?>/images/img_4.jpg" alt="Market" /> </a> <div class="caption"> <div class="indent1">in grey </div> <div class="image-desc">Luxury living is being redefined and emphasis is being laid on comfortable living, without compromising on style, modest in the color codes</div> <div class="indent"><h4>Sitting room </h4></div> </div> </li> <li class="last"> <a class="thumb" name="leaf" href="<?php bloginfo('stylesheet_directory'); ?>/images/img_b5.jpg" title="Business"> <img src="<?php bloginfo('stylesheet_directory'); ?>/images/img_5.jpg" alt="Business" /> </a> <div class="caption"> <div class="indent1">living set </div> <div class="image-desc">Cool looking but extremely functional and comfortable. The colours black and white dominate throughout.<br /> Sleek and stylish interior to suit your taste.</div> <div class="indent"><h4>Contemporary</h4></div> </div> </li> </ul> </div> </div> </div> Hello, How I can detect URLs in a larger body of text using a regular expression in javascript. For ex.: I type this text in my form and I saved in database: My home page is http:// www. mypage .com.it And in my site I want to appear like he My home page is http://www.mypage.com.it I am not sure if this is a javascript problem or an html problem. I have posted the code below. The main two areas that I am interested in are 1) the area where the photo is shown in the larger size, and 2) the thumbnails below the larger picture. Right now in the img tag of the first image I have specified a height and width of 450px. The result is that when one hovers the mouse over the thumbnails, all pictures are shown at that size, regardless if they are larger or smaller than 450 x 450 pixels. I am not concerned about the larger images because I will use a script to scale those that someone on this forum was so kind enough to provide me with. The IMPORTANT PART IS HE I am concerned with smaller images. If you remove the height and width portion from the image tag, when you hover the mouse over a picture that's smaller than the others, such as the last one, which is smaller than all the others that are at 450 x 450, the thumbnails "move up". I would like the thumbnails to remain where they are at / for the top area where the photos are displayed to always be the same size, such as 450 x 450 px., and for the smaller pictures to be shown in the center in that area. How can this be done? Note: The entire portion of the stylesheet is not present. Let me know if something important is missing. Code: <html>
<head>
<meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type">
<title>MouseOver-Images</title>
<style type="text/css">
td#kdwhdMAINPHOTO { width: 616px; vertical-align: top; }
table#kdwhdTHUMB { margin-top: 12px; }
td#kdwhdTHUMBNAILS { background-image:
url(http://www.sunandfuninoc.com/testingsites/gems4me/images/t_28.jpg);
width: 616px; height: 114px; text-align: center; }
td#kdwhdTHUMBNAILS img { border: 1px solid #696969; }
td#kdwhdTABLE { width: 296px; vertical-align: top; }
-->
</style>
</head>
<body>
<table style="width: 924px;" border="0" cellpadding="0"
cellspacing="0">
<tbody>
<tr>
<td id="kdwhdMAINPHOTO"
style="text-align: center; background-color: white;">
<!--Image 1--> <img
src="http://site.gems4me.com/images/red2.jpg" alt="Item photo"
name="swap" style="border: 0px solid rgb(105, 105, 105);"
height="450" width="450">
<table id="kdwhdTHUMB" border="0" cellpadding="0"
cellspacing="0" width="616">
<tbody>
<tr>
<td><img
src="http://www.sunandfuninoc.com/testingsites/gems4me/images/t_26.jpg"
alt="Click on the picture below to enlarge" height="25"
width="616"></td>
</tr>
<tr>
<td><img
src="http://www.sunandfuninoc.com/testingsites/gems4me/images/t_27.jpg"
alt="" height="10" width="616"></td>
</tr>
<tr>
<td id="kdwhdTHUMBNAILS"><!--Image 1--><img
src="http://site.gems4me.com/images/450by450.jpg"
alt="Item photo"
onmouseover="document.swap.src='http://site.gems4me.com/images/450by450.jpg';"
height="80">
<!--Image 2--> <img
src="http://site.gems4me.com/images/450by450-2.jpg"
alt="Item photo"
onmouseover="document.swap.src='http://site.gems4me.com/images/450by450-2.jpg';"
height="80">
<!--Image 3--> <img
src="http://site.gems4me.com/images/450by450.jpg"
alt="Item photo"
onmouseover="document.swap.src='http://site.gems4me.com/images/450by450.jpg';"
height="80">
<!--Image 4--> <img
src="http://site.gems4me.com/images/450by450-2.jpg"
alt="Item photo"
onmouseover="document.swap.src='http://site.gems4me.com/images/450by450-2.jpg';"
height="80">
<!--Image 5--> <img
src="http://site.gems4me.com/images/red2.jpg" alt="Item photo"
onmouseover="document.swap.src='http://site.gems4me.com/images/red2.jpg';"
height="80"></td>
</tr>
<tr>
<td><img
src="http://www.sunandfuninoc.com/testingsites/gems4me/images/t_29.jpg"
alt="" height="10" width="616"></td>
</tr>
</tbody>
</table>
</td>
<td><img
src="http://www.sunandfuninoc.com/testingsites/gems4me/images/spacer.gif"
alt="" height="1" width="12"></td>
<td id="kdwhdTABLE">
<table border="0" cellpadding="5" cellspacing="0"
width="296">
<tbody>
<tr>
<td colspan="2" id="kdwhdTABLETITLE">Stuff</td>
</tr>
<tr>
<td class="kdwhdSPECR1C1" nowrap="nowrap">Stuff</td>
<td class="kdwhdSPECR1C2">Stuff</td>
</tr>
<tr>
<td class="kdwhdSPECR2C1" nowrap="nowrap">Stuff</td>
<td class="kdwhdSPECR2C2">Stuff
</td>
</tr>
<tr>
<td class="kdwhdSPECR2C1" nowrap="nowrap">Stuff</td>
<td class="kdwhdSPECR2C2">Stuff</td>
</tr>
<tr>
<td class="kdwhdSPECR2C1" nowrap="nowrap">Stuff</td>
<td class="kdwhdSPECR2C2">Stuff</td>
</tr>
<tr>
<td class="kdwhdSPECR2C1" nowrap="nowrap">Stuff</td>
<td class="kdwhdSPECR2C2">Stuff</td>
</tr>
<tr>
<td class="kdwhdSPECR2C1" nowrap="nowrap">Stuff</td>
<td class="kdwhdSPECR2C2">Stuff</td>
</tr>
<tr>
<td class="kdwhdSPECR2C1" nowrap="nowrap">Stuff</td>
<td class="kdwhdSPECR2C2">Stuff</td>
</tr>
<tr>
<td class="kdwhdSPECR2C1" nowrap="nowrap">Stuff</td>
<td class="kdwhdSPECR2C2">Stuff</td>
</tr>
<tr>
<td class="kdwhdSPECR2C1" nowrap="nowrap">Stuff</td>
<td class="kdwhdSPECR2C2">Stuff</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</body>
</html>
|
|||||||