|
JavaScript - Display Text When Image On-click/hide Text When Different Image Click
Hi
I have created the following effects on the images seen here http://techavid.com/design/test3.html . You see when you hover and then click on each image, they go from grey to color. When you click on one - the others go grey and the one clicked remains color. That's cool, but now I need the text 1st: Sun for example to display and hide along with its graphic button. The word "Sun," is a link that needs to link out to a URL so it has to be separated from the image effect code. Here code I have now.... Code:
<style type="text/css" media="screen">
#wrapper {
background: url('_assets/images/sun-inactive.p') no-repeat #777eee;
width: 470px;
margin: 0 auto;
}
a#sun{
background: url('_assets/images/sun-inactive.png') no-repeat;
width: 107px;
height: 78px;
display:block;
padding: 20px 10px;
float: left;
}
a#sun:hover,
a#sun.active {
background: url('_assets/images/sun.png') no-repeat;
width: 107px;
height: 78px;
display:block;
padding: 20px 10px;
}
a#plane {
background: url('_assets/images/plane-inactive.png') no-repeat;
width: 107px;
height: 78px;
display:block;
padding: 20px 10px;
float: left;
}
a#plane:hover,
a#plane.active {
background: url('_assets/images/plane.png') no-repeat;
width: 107px;
height: 78px;
display:block;
padding: 20px 10px;
}
a#nano {
background: url('_assets/images/nano-inactive.png') no-repeat;
width: 107px;
height: 78px;
display:block;
padding: 20px 10px;
float: left;
}
a#nano:hover,
a#nano.active {
background: url('_assets/images/nano.png') no-repeat;
width: 107px;
height: 78px;
display:block;
padding: 20px 10px;
}
#popuptext {
float: left;
margin: -30px 0 0 0;
padding: 0 0 0 0px;
font-size: 11px;
}
#popuptext a {
color: #ff6600;
padding: 0 30px;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="navigation">
<a id="sun" href="#"></a>
<a id="plane" href="#"></a>
<a id="nano" href="#"></a>
</div>
<div style="clear:both"></div>
<div id="popuptext">1st: <a href="#">Sun</a>
2nd: <a href="#">Airplane</a>
3rd: <a href="#">Nano</a>
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
// target each link in the navigation div
$('#navigation a').click(function() {
// link that you clicked
clicked = $(this).attr('id');
// make sure that all the others are not active
// except for the clicked one
$('#navigation a').each(function() {
if ($(this).attr('id') == clicked) {
$(this).addClass('active');
} else {
$(this).removeClass('active');
}
});
// prevent the default link action
return false;
});
});
</script>
What jquery or javascript code do I need to do this? thanks, chaser Similar TutorialsOk. 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>
I have a small snippet of code which will copy the contents of a textbox to the clipboard when a small image, say a button, is clicked. I want to achieve a similar effect when I click a hotspot on an image, but in this case the text will have to come from...well, I don't know. Maybe the title in an area tag? This is what I have so far for a textbox: Code: //clipboard copy
function ClipBoard(what){
Copied = document.getElementById(what).createTextRange();
Copied.execCommand("Copy");
alert ("Information copied to the clipboard. Use CTRL-V to paste.");
}
<textarea id="holdtext1"></textarea> <img border="0" src="copyclick.gif" onclick="ClipBoard('holdtext1');" alt=" Click to copy text to clipboard / CTRL-V to paste" style="cursor: hand" width="18" height="18">
Does anyone have any ideas? I am looking for a javascript code for this idea under this message ---------------------------------------------------------------------------------------------------------------------------------------------------- I want to create a kind of shopping website so when you click on a image or text it will add some text to a textarea,, it will include the name of item and price of an item Hello guys, I'm new to Javascript and my question involves text appearing upon a button click or after a set time. I have the following code: Code: <script type="text/javascript">
function timedMsg()
{
document.write("Timed Messege.");
}
And the button: Code: <form> <input type="button" value="Display timed alertbox!" onClick="timedMsg()" /> </form>[ I guess document.write is not the correct command to use in such situations, since it just replaces the whole page. Which command should I use so that the wanted text appears within the page, without reloading or replacing it? Thanks in advance. I could not find a proper command in my search. 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! hey guys i dont know if this is javascript or not but i need text in a message body form to instruct people what to write about and then i need it to dissappear once the user clicks into it heres the link, http://www.blusmash.com/test The "Message" text box need to have stuff in it thanks! Hi im using this to hide and show some text, how do i do to change the text "Show" to hide when i click it and back to "Show" when click it again. Code: <script type="text/javascript">
$(document).ready(function(){
$('.accordion-content').hide();
//toggle the componenet with class accordion
$('.accordion-toggle').click(function(){
//$(this).toggleClass('toggle-accordion-active');
$(this).next('.accordion-content').slideToggle(300);
});
$('#accordion-expand-all').click(function(){
$('.accordion-content').slideToggle(300);
});
});
</script>
Code: <p><a id="accordion-expand-all" href="#">Show</a></p> I'm trying to figure out how to both make the text grey and when a user clicks inside a input field remove the helptext. So far I got this: Code: <input onfocus="this.select()" onblur="this.value=!this.value?'E-mail here':this.value;" name="name" value="E-mail here" type="text"> What this does is allmost correct, but it doesnt remove the predefined text "E-mail here", it just select it all, and then the text is not grey... Can somebody please guide me in the right direction... Thanks in advance! I wish to have my form update a text field when a 'add' link or button is clicked, allow for more entries to be added without having the page refresh. but i need to be able to have both the friends name and their number added to the field like so if friends name is say 'jason' and their number is '0987654321' then it will add to the textarea like so. jason [0987654321] this way i should be able to get the data and split it up when the form is send so i can add them in the DB. the part i am stuck on is how to get both fields in the textarea. allowing for more to be added without a refresh. can anyone suggest how they might do this. Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> </head> <body> <form name="AddUser" action="" method="post"> <div> <div class="formspacer">Username: <input type="text" name="username" id="username" value=""></div> <div class="formspacer">Contact Telephone Number: <input type="text" name="phone" id="phone" value=""></div> <div class="formspacer">Your Email address: <input type="text" name="email" id="email" value=""></div> <br /> <div class="formspacer"><strong>Enter each entry and click ADD to insert.</strong></div> <div class="formspacer">Friend name: <input type="text" name="friendname" id="friendname" value="" size="40"></div> <div class="formspacer">Friend`s mobile: <input type="text" name="friendmob" id="friendmob" value="" size="20"> <br />ADD<br /> <textarea disabled name="MULTIfriend" id="MULTIfriend" cols=20 rows=10></textarea></div> </div> <input type="submit" name="AddUser" value="Add User"> </form> </body> </html> I am new to JavaScript and I am having a difficult time finding what I thought would be easy to find (so please forgive me if this has been posted somewhere else...) I have 4 text strings that when a user runs his/her mouseOver, I'd like to display a corresponding picture in a display area. I thought that would be easy enough. However, it gets a bit complicated for me since I am also using CSS to position the display area. For some reason all I can find out there are examples using HTML tables for display image positioning. I don't want to use tables. I'm not sure if this will make a difference but my style sheet is external. Also, the text does not link/go to another page. I REALLY hope that made sense. Someone please help me! Hi guys, this is my first post so be gentle. The problem I am having is this.. I want to have a link so that when you put your mouse over it, an image will be displayed in another frame. I thought this would not be as hard as it has been other wise i would not be turning to you for help. this is the link right now: <a href="http://www.dickblick.com/zz529/47/" rel="nofollow" target="_blank">Alvin 4-Piece Creative Center</a> its just a standard link. the image is located at /images/alvin_wood.jpg here is what I have tried so far.. I have tried using the window.open command and that seemed to work but i could not get it to open in a size of my determiation.. ie 200 by 300 (random demensions i just threw out). ive tried this: <a href="javascript: onMouseOver="window.open('images/picture.jpg')"> Ive tried using the showtrail and hide trail functions ( i think they are functions), and a slew of others but i got mad and deleted it... i prolly shouldnt have done that.. but ill find it and post it so you can see. http://www.stockxpert.com/browse.phtml?f=s&c=100 that is what i want to do except starting off it would be the link and then the image would pop up... I dont even care if its in another frame.. I can take that frame out its not a bid deal.. ive been screwing with this for two weeks and this is my last bit of effort to find an answer.. SO!! if anyone can help I would be greatful!! THANK YOU! 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 need help! Basically, I need to create a sentence and on one of the words the person accessing the site can click the word and it will change to another word and then again to a third word and so on for 5 words then it will, on click, return to the 1st word again. like a circle of various words. I've managed to get it to work with 2 words back and forth - but I need it to have multiple states. I need the JS and how to impliment it in the HTML. JS isnt my strong point just yet Please help me! Thanks so so much! follow me on twitter - @robyn_90 Hi, I want to load an image when a user clicks a link on my page. The image is a tracking pixel for an affiliate network, so it doesn't need to be visible to the user (as it's not an image anyway but a php file). I assume this would use the onclick event. Can anyone help? I'm sure this question has been asked, but I tried searching for this answer using many different keywords, but I don't know the correct terminology for my question, as the search results turn up other topics. I'm wondering if there's simple code for clicking on a thumbnail to have a larger version of the picture appear above, but still within, the same webpage, and the background darkens a little. The larger picture has a "close" button, which you click to get back to the underlying original page. An very simple example of the type I'm looking for is he http://www.salon.com/comics/tomo/200...omo/index.html I'm assuming this is a java script that does this. I'm using DreamWeaver. Does Adobe have this type of coding in their "Spry" coding? If not, is there a simple template of the code out there? Thank you for any help. I have about 40 images on an educational website. When the user clicks each image, a different one second long mp3 should play without opening a new window. Is it possible to do this with javascript? Thanks in advance. What is the correct code to make a sound play every time you click a certain image? All the codes I've found online aren't working, or I'm not inputting something correctly..
Hello, I'm looking for help as I have the jCarouselLite feature functioning on my website and am looking for a way of displaying another image to the right of the carousel, dependent upon which image is visible in the carousel. I toyed with the idea of implementing another snippet of JavaScript to swap the text to the right and manually synching the swap time wise, but quickly abandoned this idea for a number of reasons, particularly as the carousely has buttons to scroll through the images displaying. I have to admit I'm not particularly great with JavaScript, but was thinking along the lines of another function that listens for the image that is displayed, but have no idea if am way off the mark, or even if this is the right track - no idea how to implement. Any help would be very gratefully recieved. Thanks, Matt Hi, I am trying to implement something like a javascript that can click and focus the Status Update Box on Facebook. Till now, I have nothing in hand that can perform the task so I thought about a javascript that can do it. I am not even a newbie to javascript but I know that it can perform various complicated tasks on client side. Can anyone here tell me how do I click the Status Update box and set it to focused by a javascript so that when I start typing the Status box receive the text ? Thanks |
|||||||