|
JavaScript - Change Image And Text Simultaneously
Similar TutorialsCode: function greet()
{
var hour = (new Date()).getHours();
var when = (hour > 17) ? "evening" : ( (hour > 11) ? "afternoon" : "morning" );
document.write('<img src="' + when + '.png" alt="Good ' + when + '">\n');}
This script puts up a png which gives a greeting depending on the time of day. I want instead to put the greeting as text. It's a bit ostentacious as it is.. I would appreciate any pointers. Site is here. Thank you. I am creating a photography website and am almost there with coding a very simple image viewer with clickable thumbnails etc. I have used the following script to change the images; Code: <script>
function changeImage(filename)
{
document.mainimage.src = filename;
}
</script>
the main image is like this; Code: <img name="mainimage" src="../Images/wedding-photo-01-bride-getting-ready.JPG" title="bride getting ready"/> And the links/images are like this..... Code: <a href="javascript:changeImage('../Images/wedding-photo-01-bride-getting-ready.JPG')">
<img class="thumbbox" id="mainimage" src="../Images/wedding-photo-01-bride-get-thumb.JPG" alt="wellis photography logo" title="bride getting ready">
</a>
This works fine, but I would also like a caption underneath the main image that changes at the same time. Is there a way to do this simply? Perhaps using some variation of the following script? Code: <script type="text/javascript">
document.write(document.getElementById('myimage').title);
</script>
Also, one other thing - is it possible to add a 'fade' transition to my 'changeimage' function? Thanks in advance Hello, I was wondering if anyone could help me with a personal website I am modifying for a friend. He basically has a list of links such as: Home Blog Pictures Links What I want to do is that whenever you roll over, say, "Blog", an image appears to the right of the links (the image will be a small screenshot of what the blog looks like). When you roll over "Pictures", a different image appears in it's place. I already know how to do this when rolling over images, but not rolling over text. I used document.getElementById and just set the src to the image, but how do I do this when I just have text to roll over? Is it possible/recommended to use the follow JQuery? http://ajax.googleapis.com/ajax/libs.../jquery.min.js Thank you for your time Right i need some help with some code, i have been trying 2 days to get it to work! basically the 3 image locations are in Variables in PHP $piclocation1 $piclocation2 $piclocation3 What i want is when you hover over the div class "breaking-news", i want the div ID "latest-news-image" to change to that specific image background. example the top "breaking-news" class is on hover and the image $piclocation1 should show in "latest-news-image". if the middle "breaking-news" class is on hover the image $piclocation2 should show in "latest-news-image". and so on if you could help me figure out a way around to get this to work i would be ever so greatfull, as i dont know if i got this in the right area as it would contain javascript, php and poss Css! and even if you could point me in the right direction would be helpful! this is the website page i am testing it on if you would like to look at if visually http://www.wolverhampton-wanderers.co.uk/text.php and here is the code: Code: <html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="Stylesheet" type="text/css" href="./wolves.css"/>
<title>Untitled Document</title>
<?php
$getnews = "SELECT * FROM `news` ORDER BY `news`.`id` DESC LIMIT 3";
$news = mysql_query($getnews) or die(mysql_error());
$counter = 1;
while($row1 = mysql_fetch_array($news)){
if($counter == 1)
{
$picture1 = $row1['imageID'];
$getimage1 = "SELECT * FROM news_images WHERE imageID = $picture1";
$image1 = mysql_query($getimage1) or die(mysql_error());
$pic1 = mysql_fetch_array($image1);
$piclocation1 = $pic1['imageFile'];
}
if($counter == 2)
{
$picture2 = $row1['imageID'];
$getimage2 = "SELECT * FROM news_images WHERE imageID = $picture2";
$image2 = mysql_query($getimage2) or die(mysql_error());
$pic2 = mysql_fetch_array($image2);
$piclocation2 = $pic2['imageFile'];
}
if($counter == 3)
{
$picture3 = $row1['imageID'];
$getimage3 = "SELECT * FROM news_images WHERE imageID = $picture3";
$image3 = mysql_query($getimage3) or die(mysql_error());
$pic3 = mysql_fetch_array($image3);
$piclocation3 = $pic3['imageFile'];
}
$counter = $counter + 1;
}
?>
</head>
<body>
<div class="shaddow"><!-- This is the shaddow behind the content -->
<div class="content"> <!-- This is the content and main background -->
<div class="header"><img src="../images/header.jpg"/></div>
<div class="menu">
<div id="nav">
<?php
$cat = "SELECT * FROM `top-menu` ORDER BY 'category' ASC";
$category = mysql_query($cat) or die(mysql_error());
$start = 1;
while($row = mysql_fetch_array($category)){
$submenu = $row['sub-menu'];
if($submenu == '1'){
echo "</li><li><a id='{$row['Active-ID']}' " .
"href='{$row['Address']}'>" .
"{$row['Text']}</a>";
}
elseif($submenu == '2'){
if($start == 1){
echo "<ul>";
}
echo "<li><a id='{$row['Active-ID']}' " .
"href='{$row['Address']}'>" .
"{$row['Text']}</a></li>";
$start = $start + 1;
if($submenu !='2'){
echo "</ul></li>";
$start = 1;
}
}
}
echo "</ul></li><a class='nav-end'></a>";
?>
</div>
</div>
<div id="latest-news">
<?php
$getnews = "SELECT * FROM `news` ORDER BY `news`.`id` DESC LIMIT 3";
$news = mysql_query($getnews) or die(mysql_error());
$counter = 0;
echo "<div id='latest-news-image'></div>" .
"<div id='latest-news-header'>Breaking News</div>";
while($row1 = mysql_fetch_array($news)){
echo "<div class='breaking-news'><div class='breaking-news-header'><a href='#'>{$row1['title']}</a></div>" .
"<div class='breaking-news-info'>Posted on {$row1['date']}, by {$row1['author']}</div>" .
"<div class='breaking-news-desc'>{$row1['desc']}</div>" .
"<div class='breaking-news-readmore'><a href='#'>Read More</a></div></div>";
$counter = $counter + 1;
}
?>
</div>
</div>
</div>
</body>
</html>
I'm very inexperienced with Javascript, but want to use the onclick event to change an image to text. I'm working on a directory type website and want users to have to click on the image of a telephone in order to reveal the telephone number they are looking for. how do i do this? Also is there a way of tracking how many clicks each person gets? I'd really appreciate any help you guys can give me on this 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! http://www.***.com/5.html i cant get a caption specific to each image to display under the arrows when the image changes. it is especially hard for me because i have to edit the javascript which confuses the **** out of me. it seemed so simple.... thanks for any help ps i cant start an id with a digit? it doesnt seem to cause any problems...why is it stated that this cannot or shouldnot be done? I'm trying to create a script that has a countdown and at each second, a div is created on the page with some content. How to run both functions at the same time at the click of a button? Thanks to the answer!
Hi, I'm one of the main developers from Trackmill.com (which is a gaming website), One of our main games is Free rider 2, Which we have converted to run via a database so people don't have to manually send around track codes so other people can evaluate their tracks. I am trying to build a track previewer in html5/javascript which will eventually replace our current one written in flash (which lags terribly on large tracks) I am stuck on 1 thing though, With the larger tracks there are up to thousands of lines that are drawn using lineTo() moveTo() etc. And when i move using the arrow keys, It requires the javascript to reload the track, and parse every single line again, Causing the screen to turn white whilst it does so. Is there a way i can use a similar method to the way it has been done in the flash version, where it is in a movieclip, which then instead of moving each line, it moves the movieclip instead. Script: Code: <html>
<head>
<script type="application/javascript">
var offsetx = -133;
var offsety = 135;
scale = 1;
var canvas;
var ctx;
var test;
function init() {
canvas = document.getElementById("game");
ctx = canvas.getContext("2d");
loadtrack();
}
function loadtrack()
{
canvas.width = canvas.width;
ctx.fillText("Loading track... Please wait.",10,16);
var request=new XMLHttpRequest;
request.open("GET","test.txt",false);
request.send();
var trackcode = request.responseText;
var type = trackcode.split("#");
var line = type[0].split(",");
var sline = type[1].split(",");
for(var i=0; i<line.length; i++)
{
var section = line[i].split(" ");
ctx.beginPath();
ctx.strokeStyle='black';
ctx.moveTo(parseInt(section[0],32)+offsetx+0.5, parseInt(section[1],32)+offsety+0.5);
ctx.stroke();
for(var j=0; j<section.length; j+=2)
{
ctx.lineTo(parseInt(section[j],32)+offsetx+0.5, parseInt(section[j+1],32)+offsety+0.5);
ctx.stroke();
}
}
for(var i=0; i<sline.length; i++)
{
var section = sline[i].split(" ");
ctx.beginPath();
ctx.strokeStyle='grey';
ctx.moveTo(parseInt(section[0],32)+offsetx+0.5, parseInt(section[1],32)+offsety+0.5);
ctx.stroke();
for(var j=0; j<section.length; j+=2)
{
ctx.lineTo(parseInt(section[j],32)+offsetx+0.5, parseInt(section[j+1],32)+offsety+0.5);
ctx.stroke();
}
}
}
function mousescroll(evt){
if (evt.detail <= 0){
scale += .05;
loadtrack();
} else {
scale -= .05;
loadtrack();
}
}
function doKeyDown(evt){
switch (evt.keyCode) {
case 37:
offsetx -= 5;
break;
case 39:
offsetx += 5;
break;
case 38:
offsety -= 5;
break;
case 40:
offsety += 5;
break;
}
loadtrack();
}
window.addEventListener('DOMMouseScroll', mousescroll, false);
window.addEventListener('keydown',doKeyDown,true);
</script>
</head>
<body onload="init()">
<canvas id="game" height="500" width="1200"></canvas>
</body>
</html>
Smaller tracks load fine, example: Code: 42 1i 5u a,8e a 8e -a 8e -u 8e -1i 92 -18 92 0 9m a aa 0 au -a au a,8e -1i 9m -26 au -1i aa -18 9m -1i 92 -18,6i a 84 a,b8 -a b8 a cg u d4 k do u do a do -a do -u cg -1i bs -18,do -u d4 -k bs -18,b8 -a bs -k bs 0 cg a d4 0 d4 -k,e2 k e2 -1i em -18,e2 -u em -k em u,fa -u fu -k gi -u fa -1i em -18,fu -k fu k fu u,gi k gi -u,fa -u em -k,6i a 5u a,gs -u gs 0 gs a i4 u jc a jc -u,gs -18 gs -u,gs -18 hg -1i hg 0 gs a,hg 0 i4 a io 0 jc a,io 0 io -1i jc -18 jc -u,jm a ku u li k m6 u m6 a,jm a jm -a ka -k ka 0 ku a li 0 li -k m6 -u m6 a,li -k ka -18 ku -1i m6 -u,mg a no u p0 a p0 -a oc -k no -u,oc -k p0 -u no -1i no -18 no -a,mg a n4 0 no a oc 0 no -a,qi a qi k r6 u r6 0 t2 u t2 a se 0 t2 -a,qi a qi -a,qi -1i qi 0,qi -1i rq -26 t2 -1i t2 -u t2 -a,r6 -18 rq -1i se -18 t2 -1i,se -18 se -k rq -a r6 -k r6 -18,qi -1i r6 -18,tc k u0 u,tc k tc 0 tc -18 u0 -1i u0 u,ua a vi u 10q a 10q -k 10q -1s 106 -26 106 -1i,ua a ua -a ua -u uu -k uu 0 vi a 106 0 106 -k 10q -u,ua -u vi -1i 106 -18 106 -1i,106 -k vi -u uu -k,114 a 12c u 130 k 11o 0 11o -a,114 a 114 -a 114 -u 12c -1i 13k -u 130 -k 130 -a 130 0 13k -a 13k -u,130 -k 12c -u 11o -k 114 -u,11o -k 11o -a,13u k 13u -u 13u -18 14i -1i 14i 0,13u k 14i u 14i 0,17m a 19i 1i 1es 1i 3d2 1i,pa a q8 a,8e a 9m u au a,e2 k em u,gi k fu u,42 1i -1mm 1i,17m a 14s a#9m -1i 9m -a aa 0,9m -a 92 0,bs 0 cg -a cg -u,cg -a d4 0,bs -k cg -u,em -k fa -a fa a fu 0,fa -a fu -k,em 0 fa a,hg 0 i4 -a io 0,hg -k i4 -u i4 -a,i4 -u io -k,ka 0 ku -a li 0,ku -a ku -u,ka -k ku -u,no -1i mg -u mg -a n4 0,mg -u no -a,no -u n4 -k,r6 -18 rq -u rq -a,rq -u se -18,tc -18 tc -1s u0 -1i,uu 0 vi -a vi -u,vi -a 106 0,11o -k 12c -a 12c a,12c -a 130 -k,130 0 12c a,14i -1i 156 -18 156 -k 14i -u##BMX# (you need to put that in test.txt in the same directory as the html file) But as soon as you load a large track, it lags. Would be quite useful if i could get a quick response as to how i could fix this. This may seem a bit of an unusual question, but I've been tossing around an idea in my head for an experimental collaborative art & music website. I've not started building the site at all, and I've only a little HTML and no scripting experience. I plan on most likely using a service like squarespace for the ease of updating and member system and other features. (I imagine a few around here scoff at that kind of service! But that's beside the present issue.) So I imagine that if javascript is capable of handling this, it's not an extremely complicated solution. For example: say I have a song I'd like users to be able to listen to, but I want to split the parts (drums, strings, guitars, vocals, etc.) among a few different audio files, all embedded within close proximity of each other (say arranged vertically in two columns) on the same page. I want this so that users are free to play around with the parts, dropping them, lowering & raising volume, even pulling them out of sync if they please. Now what I want is a single button that will trigger all of the audio files to begin playback simultaneously, say, above the embedded files and centered. Would this be possible? Could anyone offer assistance in setting up this kind of thing? Thanks in advance! OK right I got a modification from here that someone requested a few weeks ago. It was supposed to replace text in the userlinks. Since I'm in IPB I find it very useful. But here's the thing I try to replace "0 New Messages" to "Inbox[0]" it worked but when I get new PM's it doesn't work like it should. So I rearranged the code but it doesn't work Code: var mb = document.getElementById("userlinks").getElementsByTagName("a");
for(bm = 0;bm < mb.length;bm++){
if(mb[bm].innerHTML=="My Controls"){mb[bm].innerHTML="Preferences"}
for(fi=0;fi < mb[bm].innerHTML.length;fi++){
if(fi[mb['bm']].innerHTML==""+fi+" New Messages"){fi[mb[bm]].innerHTML="Inbox "+fi+""}
}
}
^^ My part there in the code is retarded lol I am trying to learn SVG and I have alot of the basics including javascript manipulation. But I am really stuck on trying to manipulate the actual text itself. Code: <text id="text1" x="300" y="200" font-size="60" font-family="tempus sans itc" stroke="red" stroke-width="2" onmouseover="changeText()"> OMG </text> I am trying to change the text "OMG" to say something else when you hover over it. For example: It says OMG, I want to hover over the text and have it change to WTF. Like you could do with innerHTML. anybody have any experience with SVG that cuold help me? hi i wants to change one input to texarea when i select one from radio, plz any suggestion how i would do that? my code PHP Code: <input type="text" name="other" value="this need to become textarea" /> <input type="radio" name="inputtext" />Text <input type="radio" name="inputtext" />Textarea so when i click inputtext radio name"other" will become a textrea rather then input type text. thanks for any help. Hi i am trying to change the colour of the text in my menu bar, i know you can do this with css or jquery but i want to try and do it with javascript in an external script sheet. I want to use the onmouseover and onmouseout functions to change the colours, and i want it so their are different colours for each menu item. Can anybody help me? Hi all, Hope you can help with the following. I'm trying to change the contents of DIV2 when I click on DIV1. The following code doesn't work for some reason. I'm using Windows 7 (64-bit), and testing on Firefox 3.6.8 and IE8. Code: <html>
<head>
<script type="text/javascript" language="javascript">
function test() {
document.getElementById("test2").innerHMTL="hello";
}
</script>
</head>
<body>
<div id="test1" style="border: 1px solid #ff0000; width: 200px; height: 100px;" onclick="test();">Test Box 1</div>
<div id="test2" style="border: 1px solid #ff0000; width: 200px; height: 100px;">Test Box 2</div>
</body>
</html>
Any help appreciated, Cheers Sean Hi there just wondering if its possible to make a text box in java script and then for that box 2 change colour when the user inputs something. For example if they enter 3 it will turn green but if they enter anything else then it will turn red. Thanks Im new to this forum and was wondering if anyone would mind helping me out. Im attempting to modify some code i found here through google to be used to change a welcome screen to 4 different languages besides english. heres the code <code> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <style type="text/css"> .hide { display:none; } .show { display:inline; } </style> <script type="text/javascript"> if(window.addEventListener){ window.addEventListener('load',showlinks,false); } else { if(window.attachEvent){ window.attachEvent('onload',showlinks); } } function showlinks() { lis=document.getElementById('nav').getElementsByTagName('li'); for(c=0;c<lis.length;c++){ lis[c].onmouseover=function() { this.getElementsByTagName('span')[0].className='hide'; this.getElementsByTagName('span')[1].className='show'; } lis[c].onmouseout=function() { this.getElementsByTagName('span')[0].className='show'; this.getElementsByTagName('span')[1].className='hide'; } } } </script> </head> <body> <ul id="nav"> <li> <span>[Closed]</span> <span class="hide"><a href="http://www.codingforums.com/">codingforums.com</a></span> </li><li> <span>[Closed]</span> <span class="hide"><a href="http://www.google.com/">google.com</a></span> </li><li> <span>[Closed]</span> <span class="hide"><a href="http://www.bbc.co.uk/">bbc.co.uk</a></span> </li><li> <span>[Closed]</span> <span class="hide"><a href="http://w3c.org/">w3c.org</a></span> </li> </ul> </body> </html> </code> As far as i can tell, if i just add the correct number of span id's it should work, or is there a different code i must plug in to get it to switch to the different languages. Hello, I'm trying to put a site together and this time I'm going for an interactive feel. Code: <p id="status">[Closed]</p> Thats the html of it. What i'm trying to accomplish is when the mouse goes onto the <p>, the [Closed] then turns into Code: <a href="index.php">Open</a> but I can't get this figured. Could someone help me? Thnx! Hi Guys, I am looking for a script to change text on a page based on the time of day. From 9am - 5pm weekdays I would like the page to display 'Open', and outside of that window to display 'Closed'. I am using HTML & PHP. Any help would be greatly appreciated. Thanks, Matt Hello, I am needing the coding to do the follow: When a user makes a selection from a dropdown, the value is placed in a text input. SELECT >>> INPUT Thank you so much for your help! |
|||||||