|
JavaScript - Onmouse Effect On Image !!!
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. Similar TutorialsI 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> 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> ............. 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? I really like the lightbox2 effect (http://www.huddletogether.com/projec...tbox2/#example) but I need help doing what I'm trying to do, for some reason I cannot get it to work, maybe you have a better recommendation? I have one large image, its a tear out of a magazine, I want the initial image to be the entire page, but I want the user to be able to click on the text area of the page and have that enlarge so the viewer can read it clearly. Any ideas? Thank you, Dustin 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!!! Hi, Does anyone knows how to use this effect using javascript? http://www.modonline.com/ Really appreciate if someone can help me. Thank You, Nadun Hi 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 I want to add the the faded effect to the slide pics that I make them change by timer and I don't know how to add the faded effect and make it work on IE and Firefox.
I need to have an image hyperlinked to a js function that fades text elswhere on the page. I imagine it looks something like <a href="(some js function or somethingrather"><img src="theimg.png"></a>, but how do I do it exactly? I would like code that I can just copy and paste in my header that is set to fade a specific line of text, and be able to hyperlink and image to initiate the js. Please help. Carson www.carsonkahn.com I am using ASP.NET and AJAX here. basically what I want is a nice little slide effect to show the next batch of images in a mini slide show. Example: << prev [image1] [image2] [image3] [image4] Next >> << prev [image5] [image6] [image7] [image8] Next >> so when the user presses next or previous, it will SLIDE to the left/right. the databinding is done at the server side end and in an update panel so it does an async postback when they press next/prev. how can I go about doing this type of effect? Hey guys, I'm new to the forum and thought I should sign up to learn a little more. I am trying to work on a lightbox for my personal portfolio site which opens up numerous images in one lightbox that you can scroll through. However, I want thumbnails below the main image too. The following link shows exactly what I mean, just click on one of the images... http://www.weareunit.com/index.php?p=3D Thanks Hi I want to build a site that has these two javascript effects. I know HTML, but dont know javscript too well, I know some to be able to change some aspects. I have found some code online that allws me to change the background image with each click of the links. the effect I now want to create is the effect that as you clikc on teh link and the new text appears, the old one drops down andthe new one pops up from the bottom into place. and you have a choice of either a big block ont eh right or a small strip on the bottom depending ont he page. what is this effect called. and does any one know where i might be able to get soem code for it from so i can insert it into my page I hope all this makes sense the site is http://www.peponi-lamu.com many thanks Hi guys, I have this piece of code at the moment and I would like to add the easing effect, would anybody please show me how to incorparate this into the code I currently have? Code: $(function($) {
$.localScroll.defaults.axis = 'y';
$.localScroll({
duration: 1000,
});
Im using the jquery.easing.1.3 plugin. I have read somewere that the easing effect needs the .animate function, for example .animate ('easeInOutExpo'), I was kind of hoping just effect: 'easeInOutExpo', would be ok but like i say im sure it needs the .animate function with this. Any help would be hugely appreciated. Kind regards, paffley Gljpartners.com this site has a interesting scrolling feature. for the images.. does anyone know how it's done? Im looking at how or what this effect is called i am not even sure if it is javascript i assume it is from looking at the code. But i cant seem to convert it to what i want. So if someone could point me to a more simple version of this code or what the technique is called that would be great. Here is the page. http://www.pizzacapers.com.au/the-me...nature-pizzas/ What i am talking about: You click the pizza and it comes up inside of the border picture on the left side of the page. Thanks Hey I'm trying to make a slot machine effect in JS - i had an ajax example but was far too complicated to manipulate to communicate with my server so im working from ground up. The way ive done it is simple html and a submit button. But i want the submit button to first create a "rolling through the images" affect like a slot machine does - then stop left to right in that order (basically like a slot machine does). Now this is beyond what i know in JS but i then also want it to know the result of the images store them into an array and push it to my PHP so i can process it on my server. Is this even possible ? And has any one ever tried such a thing because im stuck but really wish to make this for my gaming website. Hope you can help! i just read the other thread and i want the reverse affect. the slideshow opens in a new window and thats not what we want because the link is to a persons profile page. we dont want two versions of the site open at once. this is the slideshow that client did on his own then i got the project. http://www.dynamicdrive.com/dynamici...nslideshow.htm Code: imagearray: [ ["pool.jpg"], ["http://mysite.com/cave.jpg", "http://cnn.com"], ["fruits.jpg", "http://cnn.com", "_new"], ["dog.jpg", "", "", "This image has a description but no hyperlink"] //<--no trailing comma after very last image element! ], i see "_new"], in there but i dont know if there is a command for self is it _self .. im not sure.. i assume it is different than the html target code. so how do i make it open in the same window just like target = self sorry had to change the target to non coded format to show up right in this thread |
|||||||