|
JavaScript - Text Replacement In Conjunction With Image Replacement?
Hi all,
As the title suggests, I'm new to JS and I've been working with HTML, CSS, and PHP for the past few years. I've decided to add some interactivity to my websites and one of the new courses requires JS in our implementations, so I figure why not. Anyhow, more to the point...the topic is a bit vague, but I didn't want to put a 50 word topic either so bear with me as I try to explain : Okay, so I'm designing an art portfolio page and I have a 250x250 pixels preview shot of an art piece on my side bar at the top. There is a horizontal column at the bottom of the page (before the footer) that contains about 6 to 8 mini thumbnails around 100x100 pixels. Right now, I am able to make it so that if I mouse over the bottom thumbnails, the 250x250 at the sidebar is replaced to reflect what was hovered at the bottom, only in a bigger size. This is my current coding: Code: <script type="text/javascript">
<!--
function change_img(path) { document.large_img.src=path}
function preload(){
myImg01 = new Image();
myImg01.src = "/msjb/wp-content/themes/msjb_theme/images/front_gal/arrival.png";
differentImag = new Image();
differentImag.src = "/msjb/wp-content/themes/msjb_theme/images/mini_gal/arrival.png";
}
-->
</script>
From that point, I would insert the following code with each 100x100 thumbnail: Code: onmouseover="javascript:change_img('/msjb/wp-content/themes/msjb_theme/images/front_gal/wind.png')"
I'm not even sure if that's the correct or most efficient way to do it...it took me a while to figure out, and it finally worked so I went along with it. What I want to do, and what I need help with is...I'd like to give the current artwork, or the piece that's currently @ 250x250 pixels at the sidebar a title. Preferably, perhaps from the context of the alt tag from an img src but not required. However, I would like for it to change to the corresponding pieces' title when I mouseover, so for example: 250x250 piece1's name is ...art1 and that name is located right under the image. I mouse over the bottom thumbnails to the 5th thumbnail, the 250x250 piece1 is replaced and becomes 250x250 piece5. I'm trying to make it so that art1 becomes art5. I'm really bad at explanations so it was clear enough for some sort of understanding. I do appreciate the help, and thanks for time! Similar TutorialsI am now able to list the folders and files in a directory. However, when I try to pass the values into another function to open the folder/file, I encounter an error saying object expected. I'm guessing that its the \ in the file paths that is causing the error. so my solution is to find the \ and replace it with a \\ before passing it to the function to open the file. but the str.replace("\\","\\\\") does not seem to work. any ideas? thanks! What other methods can I use to insert code into my HTML pages from an external file, that will be able to be picked up by search engines and will show entirely if you do a "View Source" on my page? I've been using document.write functions in my personal home page for doing things like maintaining nav. bars, footers, etc. However, the HTML that's written using document.write is not picked up by search engines being that its browser-side instead of server-side and if you view the source of the page, all it shows is the call to my JS function that does the document.writes. I am very much a newbie at Javascript, so your help is greatly appreciated. I am working on trying to create a Picture Bingo JavaScript. I am using the standard Bingo Card Generator and it works great however, I need help coding the script so that the number are associated with a picture for example everytime number 12 would show up on the card an image would replace the number. Here is the code that I am using: HTML: Code: <head>
<link rel="stylesheet" rev="stylesheet" href="file:///Macintosh HD/Users/jhumberger/Documents/script01.css" />
<script src="/script01.js" type="text/javascript" language="javascript"></script>
</head>
<body>
<h1>Bingo Card</h1>
<table>
<tr>
<th width="20%">A</th>
<th width="20%">M</th>
<th width="20%">9</th>
<th width="20%">6</th>
<th width="20%">0</th>
</tr>
<tr>
<td id="square0">
<td id="square1"> </td>
<td id="square2"> </td>
<td id="square3"> </td>
<td id="square4"> </td>
</tr>
<tr>
<td id="square5"> </td>
<td id="square6"> </td>
<td id="square7"> </td>
<td id="square8"> </td>
<td id="square9"> </td>
</tr>
<tr>
<td id="square10"> </td>
<td id="square11"> </td>
<td id="WSBT">WSBT</td>
<td id="square12"> </td>
<td id="square13"> </td>
</tr>
<tr>
<td id="square14"> </td>
<td id="square15"> </td>
<td id="square16"> </td>
<td id="square17"> </td>
<td id="square18"> </td>
</tr>
<tr>
<td id="square19"> </td>
<td id="square20"> </td>
<td id="square21"> </td>
<td id="square22"> </td>
<td id="square23"> </td>
</tr>
</table>
<p><a href="file:///Macintosh HD/Users/jhumberger/Documents/script01.html"
</body>
</html>
The Java Script: Code: window.onload = newCard;
var usedNums = new Array(76);
var images = [
'https://www.kqimageserver.com/pwimages/new/testimages/random1.jpgg',
'https://www.kqimageserver.com/pwimages/new/testimages/random1.jpg',
'https://www.kqimageserver.com/pwimages/new/testimages/random1.jpg'
];
var image = images[newNum];
function newCard() {
if (document.getElementById) {
for (var i=0; i<24; i++) {
setSquare(i);
}
}
else {
alert("Sorry, your browser doesn't support this script");
}
}
function setSquare(thisSquare) {
var currSquare = "square" + thisSquare;
var colPlace = new Array(0,1,2,3,4,0,1,2,3,4,0,1,3,4,0,1,2,3,4,0,1,2,3,4);
var colBasis = colPlace[thisSquare] * 15;
var newNum;
do {
newNum = colBasis + getNewNum() + 1;
}
while (usedNums[newNum]);
usedNums[newNum] = true;
document.getElementById(currSquare). innerHTML = newNum;
}
function getNewNum() {
return Math.floor(Math.random() * 15);
}
Thanks for your help! Joe Hi, im using this code as a fancybox replacement for confirm. Code: function fancyAlert(msg) {
jQuery.fancybox({
'modal' : true,
'content' : "<div style=\"margin:1px;width:240px;\">"+msg+"<div style=\"text-align:right;margin-top:10px;\"><input style=\"margin:3px;padding:0px;\" type=\"button\" onclick=\"jQuery.fancybox.close();\" value=\"Ok\"></div></div>"
});
}
function fancyConfirm(msg,callback) {
var ret;
jQuery.fancybox({
modal : true,
content : "<div style=\"margin:1px;width:240px;\">"+msg+"<div style=\"text-align:right;margin-top:10px;\"><input id=\"fancyConfirm_cancel\" style=\"margin:3px;padding:0px;\" type=\"button\" value=\"Cancel\"><input id=\"fancyConfirm_ok\" style=\"margin:3px;padding:0px;\" type=\"button\" value=\"Ok\"></div></div>",
onComplete : function() {
jQuery("#fancyConfirm_cancel").click(function() {
ret = false;
jQuery.fancybox.close();
})
jQuery("#fancyConfirm_ok").click(function() {
ret = true;
jQuery.fancybox.close();
})
},
onClosed : function() {
callback.call(this,ret);
}
});
}
function fancyConfirm_text() {
fancyConfirm("Ceci est un test", function(ret) {
alert(ret)
})
}
how can i use fancyConfirm via an onclick in a hyperlink? thanks for your help! OK so I have a variable called url and I want to move its contents into the form action once the button is submitted. <script type="text/javascript"> function elibrarySearchGo(){ var url = "http://url'" } </script> <form name="searchform" target="_blank" action="" onsubmit=""> I need the syntax as to how to put in a variable coming from javascript inside onsubmit="document.form.action.value = variable" for example. Also, is it better to run this population of the action onsubmit or onclick? Thanks all in advance!! 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 I need to replace the captions with simple text for download speed purposes. This is controlled by a piece of Javascript written for me. I need to change the caption image for a text one. The site is here Frank alias effpeetee. All, I'd like to have something similar to the rotating images and text on my website. The website that I would like to mimick is: http://www.photoworks.com/ You can see that the images move but there is still text over the image that I can click on. How would I go about doing something similar to this on my website. I'm guessing it's a combination of Javascript and CSS but I figured I'd start here. Thanks for any help in advance. Hello everyone, I'm hoping that somebody can point me in the right direction. What I need to do is create a form which people enter text, and it displays over an image immediately on the same page. I have seen this done on so many different websites and can only assume that it's Javascript or Jquery that makes it work. I have seen it work where people enter the desired text, click update, and the text is then displayed over the image, but I've also seen it work where clicking update is not required, and the text is displayed automatically. If anybody can direct me to a script which does this, I'd be very grateful. Any help is appreciated! Many thanks, MG i found a tutorial for doing the lightbox image viewer...and the link and demo is given below.. can someone tell me how do i replace the image with text in the lightbox....i mean when we hit on the image what shud i do to display text instead of image....hit on the image in the site and it will display an image.... http://www.dynamicdrive.com/dynamici...box2/index.htm thanx Hi, I was wondering how to resize a div containing some text by setting a width and height so it would stretch to fill that area like an <img> tag? E.g. when you set the width and height attribute of an image, it resizes the image to fill that area. I do not wish to send a request to a php script to build an image containing the text since it will be slow and affect the scalability of the web app. Oh, and I would preferably not like to use html5 because it is a requisite that I need compatibility with ie7+ (and firefox/chrome). Thanks, akrylic Code: 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. Hello! I am using this script for showing who is on the air. I would like to know if anyone has an idea how to make this show a picture file instead of text for who is on air. The script is great in that the gmt offset works. I would just rather have it show an image instead of text. Code: <span id = "dj" style="font-size:12px; font-weight:bold; font-family: Tahoma; color: #6600FF;"></span>
<script type = "text/javascript">
function display() {
var show = "No show scheduled at present";
var GMToffset = -5; // Your current GMT offset, whether Standard or Daylight
var now = new Date();
var dy = now.getDay(); // day of week 0-6
now.setHours(GMToffset + now.getHours() + now.getTimezoneOffset() / 60);
var hh = now.getHours();
var mn = now.getMinutes();
hh = hh + (mn/60); // minutes expressed as fractions of an hour
// The GMT offset ensures that every visitor, regardless of their timezone, will see the schedule
// that is appropriate for the site owner's local time.
// Tip - for testing purposes you can put here
//dy = 5;
//hh = 9.25;
// or whatever to check that the right show appears at that day/time.
if (dy >=1 && dy <=5) { // days in Javascript are 0 Sunday - 6 Saturday
if (hh >=0 && hh <3) {show = "Matt Knight at Night"}
if (hh >=3 && hh <9) {show = "Non-Stop Music"}
if (hh >=9 && hh <17) {show = "The Matt Knight Show"}
if (hh >=17 && hh <18) {show = "Saving the 70's with Mike Walker"}
if (hh >=18 && hh <20) {show = "Non-Stop Music"}
if (hh >=20 && hh <21) {show = "Eighties at Eight with Rockin' Ron"}
if (hh >=21 && hh <24) {show = "Matt Knight at Night"}
}
if (dy >= 2 && dy <=5) {
if (hh >=0 && hh <3) {show = "Matt Knight at Night"}
if (hh >=3 && hh <9) {show = "Non-Stop Music"}
if (hh >=9 && hh <18) {show = "The Matt Knight Show"}
if (hh >=18 && hh <19) {show = "Non-Stop Music"}
if (hh >=19 && hh <20) {show = "Non-Stop Music"}
if (hh >=20 && hh <21) {show = "Eighties at Eight with Rockin' Ron"}
if (hh >=21 && hh <24) {show = "Hank and Jim Show"}
}
if (dy >= 3 && dy <=5) {
if (hh >=0 && hh <3) {show = "Hank and Jim Show"}
if (hh >=3 && hh <9) {show = "Non-Stop Music"}
if (hh >=9 && hh <18) {show = "The Matt Knight Show"}
if (hh >=18 && hh <19) {show = "Non-Stop Music"}
if (hh >=19 && hh <20) {show = "Non-Stop Music"}
if (hh >=20 && hh <21) {show = "Eighties at Eight with Rockin' Ron"}
if (hh >=21 && hh <24) {show = "The Pete Sayek Show"}
}
if (dy >= 4 && dy <=5) {
if (hh >=0 && hh <1) {show = "The Pete Sayek Show"}
if (hh >=1 && hh <9) {show = "Non-Stop Music"}
if (hh >=9 && hh <15) {show = "The Matt Knight Show"}
if (hh >=15 && hh <18) {show = "Stafford's World - Mark Stafford"}
if (hh >=18 && hh <19) {show = "Non-Stop Music"}
if (hh >=19 && hh <20) {show = "Non-Stop Music"}
if (hh >=20 && hh <21) {show = "Eighties at Eight with Rockin' Ron"}
if (hh >=21 && hh <24) {show = "Matt Knight at Night"}
}
if (dy == 5) {
if (hh >=0 && hh <3) {show = "Matt Knight at Night"}
if (hh >=3 && hh <9) {show = "Non-Stop Music"}
if (hh >=9 && hh <15) {show = "The Matt Knight Show"}
if (hh >=15 && hh <18) {show = "Beachey Live from the U.K."}
if (hh >=18 && hh <19) {show = "Catt Live from California"}
if (hh >=19 && hh <20) {show = "Catt Live from California"}
if (hh >=20 && hh <21) {show = "Catt Live from California"}
if (hh >=21 && hh <23) {show = "Psychedelic Detached Garage - George Cannon"}
if (hh >=23 && hh <24) {show = "Matt Knight at Night"}
}
if (dy == 6) { // Saturday Note the two = signs to mean equals
if (hh >=0 && hh <10) {show = "Non-Stop Music"}
if (hh >= 10 && hh <13) {show = "Stafford's World - Mark Stafford"}
if (hh >=13 && hh <13.30) {show = "Cheeze Pleeze - Snarfdude and Dafodil"}
if (hh >=13.30 && hh <20) {show = "Non-Stop Music"}
if (hh >=20 && hh <23) {show = "Flashback with Matt Knight"}
if (hh >=23 && hh <24) {show = "Imagination Theater"}
} //End of Saturday Shows
if (dy == 0) { //Sunday Shows
if (hh >= 0 && hh <10) {show = "Non-Stop Music"}
if (hh >=10 && hh <11) {show = "Motown Memories with Tom Fallon"}
if (hh >=11 && hh <22) {show = "Non-Stop Music"}
if (hh >=22 && hh <23) {show = "Imagination Theater"}
if (hh >=23 && hh <24) {show = "Non-Stop Music"}
} // End of Sunday Shows
var a = "" + show + " \u00A0 \u00A0 \u00A0 \u00A0 "; // spaces must be separted by Unicode spaces to prevent collapse
document.getElementById("dj").innerHTML = a;
setTimeout("display()", 60000); // update every 60 seconds
}
</script>
Hi everyone. I'm brand new to this forum and in need of some help. If you've got a free minute and are interested in helping the clueless I've got one for you. I'm trying to form a script and the appropriate calls to fade-in some text on the event of an image mouseover. Here is what I'm working with: Code: <html>
<head>
<script type="text/javascript">
function setOpacity(level) {
element.style.opacity = level;
element.style.filter = "alpha(opacity=" + (level * 100) + ");";
}
var duration = 1000;
var steps = 20;
var delay = 5000;
function fadeIn() {
for (i = 0; i <= 1; i += (1 / steps)) {
setOpacity(" + i + "), i * duration;
}
}
</script>
</head>
<body>
<p id="text" style="filter:alpha(opacity=0);opacity:0.5">
This is the text.
</p>
<img name="image" src="pic.jpg" onmouseover="javascript:fadeIn(document.getElementById('text'))" />
</body>
</html>
I know there are problems with this. It looks wonky to me and I don't even know what I'm doing. It's a mashup of some code I found somewhere and my own bad guesses at how to fill in the gaps. Any tips on how I can bring this together? Thanks so much for reading this far. I appreciate your time. I've been looking for a reference to my situation for two days and i can't find any that are relevant enough. I'm trying to accept text as a URL for an image source. I then display that image in a form with the use of a <button type=button onclick=codeThatGeneratesImage > type thing. Code: function addImageToForm(formID) {
//get a reference to the form
var formElement = document.getElementById(formID);
//get a reference to the element that contains the url
var elementWithImageURL = document.getElementbyId("imageURLInput");
//get URL entered
var imageURL = elementWithImageURL.getAttribute("value");
//create image element
----------------------------------------------------------------------------------
var newImage = document.createElement("img");
//reference the source using the url
newImage.setAttribute("src", imageURL);
newImage.setAttribute("name", "newImage");
//append the image to form
formElement.appendChild(newImage);
}
i know that the bottom half works because i tried it with just a reference to an image directly and it worked. i can't figure out why most of the top part isnt working. any help would be much appreciated 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 Hello all, I'm new to this forum so please forgive me if I make mistakes and feel free to point them out. I'm a beginner when it comes to javascript, but would like to learn. I have been building a website that I would like to put an interactive feature on. This is the code that I currently have: Code: <a href="javascript:void(0)" onclick="changeImg(white, 'images/Bouquet_pink.jpg')" onmouseover="scroll_up();"><img class="pinkico" hspace="3" onMouseover="this.style.opacity=1;this.filters.alpha.opacity=100;" onMouseout="this.style.opacity=0.5;this.filters.alpha.opacity=50;" src="images/Bouquet_pink_icon.jpg"> <a href="javascript:void(0)" onclick="changeImg(white, 'images/Bouquet_yellow.jpg')"><img class="yellowico" hspace="4" onMouseOver="this.style.opacity=1;this.filters.alpha.opacity=100;" onMouseout="this.style.opacity=0.5;this.filters.alpha.opacity=50;" src="images/Bouquet_yellow_icon.jpg"> <a href="javascript:void(0)" onclick="changeImg(white, 'images/Bouquet_white.jpg')"><img class="whiteico" onMouseover="this.style.opacity=1;this.filters.alpha.opacity=100;" onMouseout="this.style.opacity=0.5;this.filters.alpha.opacity=50;" src="images/Bouquet_white_icon.jpg" ></a> I would like to have these images scroll together at the same time in accordance with the mouse movement. So when the mouse is just hovering over one of these images or elsewhere on my page they will stay still, but when the mouse is hovered over the left or the right hand side the images move in that direction? So if the mouse is hovering over to the left side the images will start to slide left and if the mouse is hovering over the right side the images will start to slide right. I have tried to do some research on this for myself but have only been able to locate this web page to explain what I am looking for: Link 1 - The type of effect I'm looking for is demonstrated by their first example, underneath the horizontal scrolling demo header. I have no idea how to achieve this code though and have failed to find any answers that I understand on the website. Adding two little arrow images for the mouseover and mouseout effect to happen would not be a problem, but I do not understand how to go about this. Hope this is ok, Thank you for reading , Nightshade14 Hello all. I'm sure this is really easy, but I have a question about being able to change a main image depending on a mouseover of particular text. I have a website where I am hosting a recipe, and I want to be able to show a 'main' picture that changes depending on where the user is hovering in the instructions. It would be very similar to this: http://piscesmike.com/Pages/recipes/onions.html The exception being that the top images are replaced by line by line instructions, and the main image changes depending on which instruction you are hovering on. Alternatively, I could also use a pop-up window with the image for the particular instruction, but could not get that to work either. I coded everything for the above link, but just cant seem to get this working. Any help is greatly appreciated. And, also feel free to try out the recipe's from PiscesMike.com, or to poke around. I know there are a few other errors (one being the day of the week deal) so once again, any input or help would be a tremendous help. Thanks and sorry for being such a noob! 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 |
|||||||