|
JavaScript - Image Roll Over Hover Effect
ok I have this image and i want the image to change upon the mouse hovering over it.
Which in it self is simple to do and I Google numerous different ways on how to do it. But each one i would be forced to use a <a href... in it. The thing is I don't want to use it cause i am already using HTML image map. I really need help on finding the code that would work... This is what I have Code: <html> <head> </head> <body> <p align="center"><img src="room.bmp" border="1" usemap="#maps" alt="Green room" /></p> <map name="maps"> <area shape="rect" coords="25,210,100,300" href="greenroom.html#energy" > <area shape="rect" coords="130,215,185,277" href="greenroom.html#water"> <area shape="rect" coords="80,11,263,149" href="greenroom.html#tv"> </map> ............. Similar TutorialsHi friends, Im new with JS. How to make the roll over effect in JS. An image, on roll over, the big size of the same image needs to appear. regards anoop Quick question, I need to get the hover effect that Templatemonster has, for example click here and hover over a template image see how you get that larger pop-up image that disappears instantly after you remove you mouse from the template thumbnail image. How would I get that effect? Thanks!!! Help, I have a navigation menu that has a flyin effect for each item using Javascript. Right now, The Javascript flys in a picture (in the same location) no matter what item you hover over. How can I get it to fly into a different position for each item. Here is my code: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>hello</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="jquery.js"></script>
<script src="hoverIntent.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#nav a").append("<em></em>");
$("#nav a").hoverIntent(function () {
$(this).find("em").animate({ opacity: "show", top: "-34" }, "fast");
var hoverText = $(this).attr("title");
$(this).find("em").text(hoverText);
}, function () {
$(this).find("em").animate({ opacity: "hide", top: "-43" }, "fast");
});
});
</script>
<style type="text/css">
body {
margin: 0px;
}
#nav
{
border-top: 2px solid #000;
border-bottom:2px solid #000;
width: 100%;
height: 36px;
line-height: 36px;
float: left;
background:url("images/OFF2.gif") repeat-x top left;
}
#nav ul {
list-style: none;
width: 900px;
margin: 0 auto;
padding: 0;
position:relative;
}
#nav li {
float: left;
}
#nav li em {
background: url(images/home.png) no-repeat;
width: 180px;
height: 45px;
position: absolute;
top: -43px;
left: 0px;
padding: 20px 12px 10px;
z-index: 1;
display: none;
}
#nav li a {
font-family:"Georgia", "Sans-Serif";
display: inline-block;
text-decoration: none;
font-size:medium;
padding: 0px 5px;
text-align:center;
color: #000;
width:110px;
height: 36px;
line-height: 36px;
background:transparent url("images/off.gif") no-repeat top right;
}
#nav li a:hover {
font-family:"Georgia", "Sans-Serif";
display: inline-block;
text-decoration: none;
font-weight:bold;
font-size:medium;
padding: 0px 5px;
width:110px;
height: 36px;
line-height: 36px;
}
</style>
</head>
<body>
<div id="nav">
<ul>
<li><a href="#">Item1</a></li>
<li><a href="#">Item2</a></li>
<li><a href="#">Item3</a></li>
<li><a href="#">Item4</a></li>
</ul>
</div>
</body>
</html>
Thank you! Hi everyone, i am looking for a tutorial or example file i can download that features the following mouseover effect: http://www.webdesignerwall.com/demo/...ed-hover2.html i have tried googling for tutorials and have tried to view source on the above page but when pasted into dreamweaver i cannot seem to get the effect to work. can anyone help??? thanks! Hi guys, any help will be greatly appreciated... The problem: Hover effect is painfully slow IE (only IE) and table mouseover causes very high processor usage When you move the mouse over table elements flash animation stutters/pauses (making flash banners impossible) You can se the page he fondovi (there's a flash animation on the right side of the page (light grey/blue color)) Hi everyone, Im new to the whole website thing as a whole but my mate got me onto joomla which has been great and iv got a site up im almost happy with and have learnt quite alot about coding etc. My problem is: Im utilising a vertical menu, just simple text as links, i want to add an effect on hover and clicking on that makes the text slide elegantly to the right about 16pixels. I have another unpublished template that iv bought (that doesnt quite work at all, module position all messed up etc) but it does this hover effect perfectly on the menu. So i have the .js file from that template and iv read some tutorials on how to add a js file to my template but its just not doing anything. Is it a good idea to try to add this file from a different template to my template or is there a easier way to do this (what i think is a) simple effect. Thanks. ps i can post the js code if wanted I am trying to create a multiple image rollover and when you click on an image, the page will direct to a relevant external website. However only the first image changes when you rollover it, the other four images will not change. Any suggestions?? Code: <HTML><HEAD><TITLE>Monsters Inc Rollover Images</TITLE>
<META content="text/html; charset=iso-8859-1" http-equiv=Content-Type>
<SCRIPT language=Javascript type=text/javascript>
<!--
var monstersincON = new Image;
var sulley = new Image;
var mike = new Image;
var booON = new Image;
var randallON = new Image;
var monstersincOFF = new Image;
var sulleyOFF = new Image;
var mikeOFF = new Image;
var booOFF = new Image;
var randallOFF = new Image;
monstersincON.src = "../images/monstersinc.jpg";
sulleyON.src = "../images/scully.jpg";
mikeON.src = "../images/mike.jpg";
booON.src = "../images/boo.jpg";
randallON.src = "../images/randall.jpg";
monstersincOFF.src = "../images/monstersincoff.jpg";
sulleyOFF.src = "../images/scullyoff.jpg";
mikeOFF.src = "../images/mikeoff.jpg";
booOFF.src = "../images/boooff.jpg";
randallOFF.src = "../images/randalloff.jpg";
/* Callout: This function takes two parameters, the version name (ON or OFF) and the image name. This makes it possible to handle all image swapping with only this one function. */
function swapImage(version, imagename){
if (document.images){
document[imagename].src = eval(imagename + version + ".src");
}
}
/* Callout: This function turns all images back to their 'off' versions. */
function rollOffAll(){
swapImage('OFF','monstersinc');
swapImage('OFF','sulley');
swapImage('OFF','mike');
swapImage('OFF','boo');
swapImage('OFF','randall');
}
//-->
</SCRIPT>
</HEAD>
<BODY bgColor=white>
<DIV align=center><A onmouseover="swapImage('ON','monstersinc');"
onmouseout=rollOffAll(); onclick="rollOffAll();return true;"
href="http://.html"><IMG
border=0 name=monstersinc alt="Monsters Inc"
src="../images/monstersincoff.jpg" width=250 height=250></A>
<HR>
<BR><A onmouseover="swapImage('ON','sulley');" onmouseout=rollOffAll();
onclick="rollOffAll();return true;"
href="http://www..html"><IMG border=0
name=sulley alt=Sulley src="../images/sulleyoff.jpg" width=175
height=225></A>
<BR><A onmouseover="swapImage('ON','mike');"
onmouseout=rollOffAll(); onclick="rollOffAll();return true;"
href="http://www..html"><IMG
border=0 name=mike alt=Mike src="../images/mikeoff.jpg" width=175
height=225></A>
<BR><A onmouseover="swapImage('ON','boo');"
onmouseout=rollOffAll(); onclick="rollOffAll();return true;"
href="http://www..html"><IMG
border=0 name=boo alt=Boo src="../images/boooff.jpg"
width=175 height=225></A><BR>
<BR><A onmouseover="swapImage('ON','randall');"
onmouseout=rollOffAll(); onclick="rollOffAll();return true;"
href="http://www..html"><IMG
border=0 name=randall alt=Randall src="../images/randalloff.jpg"
width=175 height=225></A><BR>
</DIV>
</BODY>
</HTML>
How can I make a image where the first image "rolls" up and another (different) image "rolls" up from the bottom? I know how to code it except for the animation sequence. All images are 200 width and 50 height.\ Thanks in advance! (Would like to use jQuery if possible) Hi, I've investigated contacting the author, but it doesn't look like I'll get a swift response. The script I'm using is hosted here The script is designed to create a fullscreen, scaling background that can be used as a carousel gallery for images, with a caption that floats next to the mouse pointer that either reads 'next' or 'previous'. It works fine but I am attempting to alter the script to do a few things: 1.Make the image take up a proportionate amount of window space - 85% (done) 2.Get rid of the text which appears on rollover(done) 3.Assign an image flip for the proportionally scaled image (this is the one I'm having problems with) I'm trying not to include too much information but it's hard to know where the problem is. I'm fairly sure this is used to set the scaler up on the page: Code: (function(){
var bg=document.getElementById('bg'),float=document.createElement('span'),scale=Scaler(bg); //Create and bind scaler-function
addEvent=function(el,on,fn){el.attachEvent?el.attachEvent('on'+on,fn):el.addEventListener(on,fn,false)}, //Function for cross-borwser addEvent
move=function(e){
float.style.left=(e=e||window.event).clientX+20+'px';
float.style.top=e.clientY+20+'px';
if(float.nxt!=(e.clientX>(document.body.offsetWidth/2)))float.innerHTML=(float.nxt=!float.nxt)?'':''; //Change html only if needed
},
swap=function(e){
var key=(e=e||window.event).type=='MouseOver'?(e.clientX>(document.body.clientWidth/2)?40:37):e.keyCode;
if(key>36&&key<41){
var data=scale(key>38?'+1':'-1'),l=data.els.length;
for(var i=0;i<l;i++)data.els[i].style.height=i==data.to?'85%':'0px';
}
}
I've then used a simple imageflip function and implemented it here Code: addEvent(bg,'mouseout',function('BNB_mouseon()'){float.style.display='none'}); //Hide floater when not over image
addEvent(bg,'mouseover',function('BNB_mouseon()'){float.style.display='block'});
Where 'bg' stands for the background image div. I've been scratching my head about this for quite a while now, so any advice is appreciated! I'm attempting to impliment it on the website http://www.freddydewemathews.com/, for a little context Hi, I'm having a problem getting one of my image rollovers to work, what confuses me is that the other image works fine, I'm trying to get this to work for an assignment here's the javascript: Code:
rollImage = new Array()
for(i = 0; i < 12; i++){
rollImage[i] = new Image(85,85);
}
rollImage[0].src = "images/narav2.jpg";
rollImage[1].src = "images/narav3.jpg";
rollImage[2].src = "images/sasuke-avatar-118.jpg";
rollImage[3].src = "images/sasuke.jpg";
function swapNar(img){ //this works fine
document.nar11.src = rollImage[img].src;
return true;
}
function returnNar(img){ //this function works fine as well
document.nar11.src = rollImage[img].src;
return true;
}
function swapSas(img){ //this function not working
document.sasim.src = rollImage(img).src;
return true;
}
function returnSas(img){ //this function also not working
document.sasim.src = rollImage(img).src;
return true;
}
Here's the HTML: Code:
<tr>
<td height="60">
<img src="images/narav2.jpg" name="nar11" width="85" height="85" border="0" id="nar11"/>
</td>
<td>
<a href="naruto.html" onMouseover = "swapNar(1)" onMouseout = "returnNar(0)"> Naruto </a>
</td>
</tr>
<!-- When I mouse over the above link the image rolls over as expected,
the bottom link doesn't work as expected and I can't see what I'm
doing wrong -->
<tr>
<td height="60">
<img src="images/sasuke-avatar-118.jpg" name="sasim" width="85" height="85" border="0" id="sasim"/>
</td>
<td>
<a href="sasuke.html" onMouseout= "swapSas(3)" onMouseover= "returnSas(2)"> Sasuke </a>
</td>
</tr>
I can't see what the problem is with the returnSas and swapSas functions, I'm still a noob at this and would really appreciate some assistance, thanks in advance Hi Guys, I'm wondering if anyone knows of some simple javascript that allows me to create a floating image rollover enlargement, similar to the ones on the homepage of ThemeForest. I've been Googling for hours, so, if anyone knows of a script, i'd be much appreciative. Thanks, Christian Hello, First of all, I am not a coder. I can put together some fairly simple HTML, and can borrow chunks of JS code to suit certain basic purposes. Also, I am terribly sorry if my technical lingo is way off target. I have managed to accomplish two separate goals using javascript, but am having trouble combining their results. I have created an image link that randomly calls a URL from an array. I also have a separate roll-over image. What I am trying to do is have the link that accesses the array also be a roll-over image. I can't seem to accomplish this. http://matrix.senecac.on.ca/~mlinhar...low/page7.html This URL is what I am working on. The "b" symbol is the roll-over. The "right" arrow accesses an array at: http://matrix.senecac.on.ca/~mlinhar...w/randomize.js I have tried simply adding my roll-over code to randomize.js and adjusting the array accordingly, but that doesn't seem to work. I would like the "right" arrow to be a roll-over image as the "b" symbol is, but also access the "randomize" array as it currently does. My problem is that my understanding of JS isn't great enough to determine how separate pieces of code might be combined or function together. Anyways, I'm sorry if my technical knowledge and abilities are too underdeveloped for this forum. I would appreciate any and all advice anyone might have. I have gotten my script to do exactly what I want it to do with one exception. I have some thumbnail images that people can mouse over and the actual image is 100px by 75px. That is what I use for my thumbnail and they reside in www.website.com/images/thumbs/image1.jpg. I have the large version of the image that resides in www.website.com/images/image1.jpg. Its actual size is 640px by 480. When I mouse over my thumbnail, I don't want the thumbnail to appear for the larger image, I want the large image to appear instead? Let me know if you need ellaboration. Any help would be great! Thank you. Javascript Code: <script language="JavaScript">
function Change_Big_One(thumb){
document.getElementById('BigOne').src=thumb.src.replace("_th","")
}
</script>
HTML THUMBNAIL Code: <div><img src="https://www.website.com/images/thumbs/image1.jpg" class="thumb" onMouseOver="Change_Big_One(this)"></div> HTML LARGER IMAGE Code: <div><img src="" id="BigOne"></div> hi all, i wanna do something like http://www.lawebdecanada.com/musica i checked their source but apparently they have protection over it.. or i just dunno how i can take the source. i wanna have a onmouse effect on image so it gives information boxed while rollover it. does anyone know how i can do this? thanks a lot. I'm trying to add an image rollover effect, but when I put it into play, the first image slowly fades into the second image and stays at the second image before I even hover my mouse over it. I've tried multiple scripts and it still seems to be happening www.alternativeland.com Does anyone have an idea as to why? Hi, I'm attempting to add the following functionality to my site. Essentially, two images are displayed with a link "View More". The user clicks "View More" and the two images are replaced by two new images. This can be repeated as required. It's a basic form of slideshow I guess, but after some googling all the tutorials etc available seem to be more aimed at fully blown shows, whereas I believe my problem is much more simple. The images are contained in a directory and are numbered like so: img1.jpg, img2.jpg. img3.jpg and so on. the code I came up with so far is PHP Code: <script type="text/javascript" language="JavaScript"> start = '<img src="gallery/img'; end = '.jpg" width="150" height="200" />'; function getImage() { var n = Math.ceil(Math.random() * 10); // i have 10 images var FirstImg=(start+n+end); var n = Math.ceil(Math.random() * 10); var SecondImg=(start+n+1+end); } /* so now I think I have two variables: FirstImg = <img src="gallery/img1.jpg" width="150" height="200" /> SecondImg = <img src="gallery/img4.jpg" width="150" height="200" /> but i'm now unsure how i'd go about displaying this on the page. ideally the HTML generated would be: <div class="pics"> <p><FirstImg></p> <p><SecondImg></p> <a href="#" onClick="return getImage()">View More</a> </div> */ </script> Am I on the right lines here or am I way off?? Appreciate some pointers. thanks a lot. Hi everyone, I have a set of "buttons" that expand/collapse information onClick, using Javascript that look like this... Here is the CSS I used to create the look of the "buttons"... Code: div.btn_workshops {
background-image: url(../images/btn_workshops_mid.gif);
background-position: top left;
background-repeat: repeat-x;
cursor: pointer;
height: 22px;
margin-bottom: 1px;
width: 330px;
}
div.btn_workshops_lt {
background-image: url(../images/btn_workshops_lt.gif);
background-position: 0 0;
background-repeat: no-repeat;
height: 100%;
width: 100%px;
}
div.btn_workshops_rt {
background-image: url(../images/btn_workshops_rt.gif);
background-position: 100% 0;
background-repeat: no-repeat;
height: 100%;
padding: 3px 12px 0px 12px;
width: 100%px;
}
.hide {
display: none;
visibility: hidden;
}
.show {
display: block;
visibility: visible;
}
Here is the HTML that contains the "buttons" and the text that will appear when you click on the "buttons" to expand them. Keep in mind that everything collapses when you click on any of the "buttons" a second time. This is done, using Javascript. Code: <div class="btn_workshops" onclick="expandWorkshops('workshop1');flipArrow('arrow1')">
<div class="btn_workshops_lt">
<div class="btn_workshops_rt">
<span class="workshops_hd">Basic Ceramics</span> - Jennifer Thompson
<img src="static/images/arrow_down.gif" width="9" height="5" alt="" title="" class="arrow" id="arrow1" />
</div>
</div>
</div>
<div id="workshop1" class="hide">Instructor: Jennifer Thompson<br />
Dates: October 9, 16, 23, and 30<br />
Hours: 2:30pm - 5:30pm<br />
Tuition: $250</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur at elit diam, quis vestibulum ligula. Ut sed orci nec erat egestas ornare a vel elit. In malesuada, lectus vitae sagittis tincidunt, urna libero pulvinar ipsum, non consectetur lectus nunc quis turpis. Ut vitae ipsum nulla, et pharetra nulla. Morbi semper, justo a dapibus sollicitudin, neque risus ultricies lectus, non iaculis elit velit in eros. Donec ultrices lobortis congue. Sed scelerisque tortor vel libero vulputate sit amet congue augue pulvinar.</p>
</div>
<div class="btn_workshops" onclick="expandWorkshops('workshop2')">
<div class="btn_workshops_lt">
<div class="btn_workshops_rt">
<span class="workshops_hd">Head Drawing and Painting</span> - Daniel Shoreman
<img src="static/images/arrow_down.gif" width="9" height="5" alt="" title="" class="arrow" id="arrow2" />
</div>
</div>
</div>
<div id="workshop2" class="hide">Instructor: Jennifer Thompson<br />
Dates: 2/19, 2/26, 3/5, and 3/12<br />
Time: 10am - 1pm<br />
Tuition: $275
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur at elit diam, quis vestibulum ligula. Ut sed orci nec erat egestas ornare a vel elit. In malesuada, lectus vitae sagittis tincidunt, urna libero pulvinar ipsum, non consectetur lectus nunc quis turpis. Ut vitae ipsum nulla, et pharetra nulla. Morbi semper, justo a dapibus sollicitudin, neque risus ultricies lectus, non iaculis elit velit in eros. Donec ultrices lobortis congue. Sed scelerisque tortor vel libero vulputate sit amet congue augue pulvinar.</p>
</div>
<div class="btn_workshops" onclick="expandWorkshops('workshop3')">
<div class="btn_workshops_lt">
<div class="btn_workshops_rt">
<span class="workshops_hd">Figure Drawing</span> - Tom Hampton
<img src="static/images/arrow_down.gif" width="9" height="5" alt="" title="" class="arrow" id="arrow3" />
</div>
</div>
</div>
<div id="workshop3" class="hide">Instructor: Tom Hampton<br />
Dates: August 7 and 14<br />
Time: 9am - 4pm<br />
Tuition: $150
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur at elit diam, quis vestibulum ligula. Ut sed orci nec erat egestas ornare a vel elit. In malesuada, lectus vitae sagittis tincidunt, urna libero pulvinar ipsum, non consectetur lectus nunc quis turpis. Ut vitae ipsum nulla, et pharetra nulla. Morbi semper, justo a dapibus sollicitudin, neque risus ultricies lectus, non iaculis elit velit in eros. Donec ultrices lobortis congue. Sed scelerisque tortor vel libero vulputate sit amet congue augue pulvinar.</p>
</div>
<div class="btn_workshops" onclick="expandWorkshops('workshop4')">
<div class="btn_workshops_lt">
<div class="btn_workshops_rt">
<span class="workshops_hd">Photographing Portraits</span> - Susan Lilianas
<img src="static/images/arrow_down.gif" width="9" height="5" alt="" title="" class="arrow" id="arrow4" />
</div>
</div>
</div>
<div id="workshop4" class="hide">Instructor: Susan Lilianas<br />
Dates: February 19 - April 23<br />
Time: 6pm - 9pm<br />
Tuition: $200
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur at elit diam, quis vestibulum ligula. Ut sed orci nec erat egestas ornare a vel elit. In malesuada, lectus vitae sagittis tincidunt, urna libero pulvinar ipsum, non consectetur lectus nunc quis turpis. Ut vitae ipsum nulla, et pharetra nulla. Morbi semper, justo a dapibus sollicitudin, neque risus ultricies lectus, non iaculis elit velit in eros. Donec ultrices lobortis congue. Sed scelerisque tortor vel libero vulputate sit amet congue augue pulvinar.</p>
</div>
<div class="btn_workshops" onclick="expandWorkshops('workshop5')">
<div class="btn_workshops_lt">
<div class="btn_workshops_rt">
<span class="workshops_hd">Still Life Oil Painting</span> - Daniel Shoreman
<img src="static/images/arrow_down.gif" width="9" height="5" alt="" title="" class="arrow" id="arrow5" />
</div>
</div>
</div>
<div id="workshop5" class="hide">Instructor: Susan Lilianas<br />
Dates: June 5, 12, 19, and 26<br />
Time: 10am - 1pm<br />
Tuition: $200
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur at elit diam, quis vestibulum ligula. Ut sed orci nec erat egestas ornare a vel elit. In malesuada, lectus vitae sagittis tincidunt, urna libero pulvinar ipsum, non consectetur lectus nunc quis turpis. Ut vitae ipsum nulla, et pharetra nulla. Morbi semper, justo a dapibus sollicitudin, neque risus ultricies lectus, non iaculis elit velit in eros. Donec ultrices lobortis congue. Sed scelerisque tortor vel libero vulputate sit amet congue augue pulvinar.</p>
</div>
Here is the JavaScript I used to create the expand/collapse effect... Code: //Expand Workshops
function expandWorkshops(obj) {
var workshop = document.getElementById(obj)
if ( workshop.className != "hide" )
{ workshop.className = 'hide' }
else { workshop.className = 'show' }
}
Here is my problem. I added the downward, red arrows to give users a "hint" that the "buttons" will do some action if you click on them. By default, I have the arrows facing down to show that information will appear below the "button." Then once a user has expanded a block of information, I want the downward, red arrow to change to an upward, red arrow. I currently have that working, but it is only working "one way." In other words, when you click on any one of the "buttons," the arrow does change, but it does not change back to the default when you click on a "button" a second time to collapse the information. Here is what it looks like with one of the "buttons" expanded. As you can see, I was successfully able to change the downward arrow to an upward arrow after the information expanded below. This helps show that the text can collapse upward if you click on the "button" a second time. Again, my problem is I am unable to get the upward arrow to return to its default, downward arrow appearance. This is what it currently looks like when you click on the "button" a second time to collapse the information. As you can see, my expand/collapse effect works, and the text goes away, but I am unable to get the upward arrow to change back to the default, downward arrow. This is the function that I added to my JavaScript, which successfully changes the arrow from down to up onClick, but fails to return the arrow image to default when you click again. Code: function flipArrow() {
if ( document.images("arrow1").src = "static/images/arrow_down.gif" )
{ document.images("arrow1").src = 'static/images/arrow_up.gif' }
else if ( document.images("arrow1").src = "static/images/arrow_up.gif" )
{ document.images("arrow1").src = 'static/images/arrow_down.gif' }
}
This is the full JavaScript that includes the expand/collapse effect and the unsuccessful swap arrow effect so you can everything together. Code: //Expand Workshops
function expandWorkshops(obj) {
var workshop = document.getElementById(obj)
if ( workshop.className != "hide" )
{ workshop.className = 'hide' }
else { workshop.className = 'show' }
}
function flipArrow() {
if ( document.images("arrow1").src = "static/images/arrow_down.gif" )
{ document.images("arrow1").src = 'static/images/arrow_up.gif' }
else if ( document.images("arrow1").src = "static/images/arrow_up.gif" )
{ document.images("arrow1").src = 'static/images/arrow_down.gif' }
}
The flipArrow function I wrote is just my latest attempt. Believe me, I've tried all kinds of things, including "if else," "if else if," "if." I've tried Variables, getElementById, and switched out all different kinds of methods and ID's. No matter what, I can't seem to get any combination to work. Don't get me wrong. One of the previous methods I tried might have been the correct one, but I most likely did not write it correctly. I am no JavaScript expert at all. The code that I currently have was partly found on the Internet and partly modified by me after hours and hours of research and troubleshooting. I'm very proud that I was able to get this far, but I'm getting to the point where I am spending all day and night, every day, trying to figure this out. I always search forums before posting in them. This is probably the second time I've ever posted in a forum. I hope it helps. Sorry to ramble on. I just want to make sure you have as many details and samples as possible so I do not get any questions or confusion. Thanks for your help! http://www.javascriptkit.com/javatut...rnalphp2.shtml Anyone have a decent way of adding a fade affect to this script? Hi all I have a list of items that when you hover over them it displays an image (using CSS). This is fine when the list is small but when the list is large it takes a while to load all the images... this then delays any javascript on the page from running until all the images are loaded. Is there a way to either: * Use javascript to make it so the image only loads when the link is hovered over? or * Allow the rest of the javascript on the page to run before the images are finished loading? I think i'd prefer the first solution if possible but i'm open to all ideas. Thanks in advance! 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>
|
|||||||