|
JavaScript - Have Text Over An Image And Rotate Image
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. Similar TutorialsHi, I need some help for rotate and zoom image as in link below. any one can help me? http://kroppr.rborn.info/ http://crop.smally.net/ 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 have image button i need to display image .if the size of the image button is 100*100 and image size is 50*50 .the remaining space of the image button should be empty.the image should not stretch. can any one guide me i am new to programming Thanks in advance!!! 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. 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, 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. 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 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 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>
Hi guys, I'm new to javascript but cannot figure out a way to do something or even if its possible. On the site there is an image with some descriptive text to the side, here is the work in progess link to the site for an idea www.igrey.co.uk/nbe I want to be able to click the arrows and the text and images change so you can scroll through a couple of different projects Any help or advice would be greatly appreciated All the best, Ian 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 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. 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! 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 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 First off thank you in advance to whomever decides to help out. I am having an issue where I am using lightbox, however what is showing up is a text link "Request Email." I understand how to manipulate this text to say anything I want. However, I am having difficulty changing the text link to an image. Instead of the text, I want to have an image (button) stored on my server http://www.something.com/something.jpeg be the link to click on instead of the text. It seems this would be easy to accomplish, but I cant figure it out. It anybody can send me in the right direction it would be appreciated. Thanks! [CODE] <a id='anchor_LU8eKAvs2W' href='http://www.emailmeform.com/builder/form/LU8eKAvs2W'>Request Email!</a><script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> <script type="text/javascript"> if (typeof jQuery == 'undefined'){ document.write(unescape("%3Cscript src='http://www.emailmeform.com/builder/js/jquery-1.4.4.min.js' type='text/javascript'%3E%3C/script%3E")); } </script> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script> <script type="text/javascript"> if (typeof $.ui == 'undefined'){ document.write(unescape("%3Cscript src='http://www.emailmeform.com/builder/js/jquery-ui-1.7.2.custom.min.js' type='text/javascript'%3E%3C/script%3E")); } </script> <link rel="stylesheet" type="text/css" href="http://www.emailmeform.com/builder/styles/dynamic.php?t=post" /> <script type="text/javascript" src="http://www.emailmeform.com/builder/js/dynamic.php?t=post&t2=0&use_CDN=true"></script> <script>$(function(){$('#anchor_LU8eKAvs2W').colorbox({width:'75%', height:'75%', iframe:true});})</script> [CODE] 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 Hi there, I'm having some real trouble with what I thought would be some really simple animations. I've been using, or trying to use the jQuery plugin. Basically I have a button, the mark up would probably (don't have to if anyone can come up with something better) look like this: Code: <button><span>Text in Button</span><i></i></button> I've uploaded a pic, to show (very crudely), how the animation should work: So, you have text with circle graphic on the end by default. When you hover over this element, the background should slide across. This could use another image, probably preferably, so 2 in totally, one for the left side and one for the right. As well as this animation,the text should also slide, probably just 5/10px or so across. I guess this would all animate in reverse when moving the mouse off the element. Does anyone have any ideas on this or can point me in the right direction? It would be greatly appreciated as ever. Thanks for taking the time to read, Steve |
|||||||