By christopherareed on
This works exactly how I want it to, I just can't figure out how to make it occur on a mouse over, instead of auto playing when the page loads? Here's the code.
<script language="JavaScript1.1">
var slidespeed=3000
//specify images
var slideimages=new Array(
"images/1.jpg",
"images/2.jpg",
"images/3.jpg")
//specify corresponding links
var slidelinks=new Array(
"http://www.example1.com",
"http://www.example2.com",
"http://www.example3.com")
var newwindow=1 //open links in new window? 1=yes, 0=no
var imageholder=new Array()
var ie=document.all
for (i=0;i<slideimages.length;i++){
imageholder[i]=new Image()
imageholder[i].src=slideimages[i]
}
function gotoshow(){
if (newwindow)
window.open(slidelinks[whichlink])
else
window.location=slidelinks[whichlink]
}
</script>
<a href="javascript:gotoshow()"><img src="images/4.jpg" name="slide" border=0 style="filter:blendTrans(duration=3)" width=97 height=100></a>
<script language="JavaScript1.1">
var whichlink=0
var whichimage=0
var blenddelay=(ie)? document.images.slide.filters[0].duration*1000 : 0
function slideit(){
if (!document.images) return
if (ie) document.images.slide.filters[0].apply()
document.images.slide.src=imageholder[whichimage].src
if (ie) document.images.slide.filters[0].play()
whichlink=whichimage
whichimage=(whichimage<slideimages.length-1)? whichimage+1 : 0
setTimeout("slideit()",slidespeed+blenddelay)
}
slideit()
</script>
Comments
mouseOver -> start
mouseOver -> start looping,
mouseOut -> stop looping?
mouseon mouseoff are the
mouseon mouseoff are the correct ways to indicate the event in javascript I believe, this may help:
http://www.utexas.edu/learn/javascript/example6.html
The only thing is I'm not
The only thing is I'm not trying to do this for menus/buttons. I need a series of images to show one after the other on the mouse over. Everything I find that has information about something like this or similar is always about swapping 2 images with one another such as menus or links or buttons.
The code I show above is the closest I can find to what I'm trying to do. Somehow I need to combine the above code with the page you linked. It's sort of a combination of the two I guess?
Drupal is primarily a server
Drupal is primarily a server side code system ( I know it has some ajax features and uses javascript libraries) but to get into doing a lot of stuff on the front-end you need to be able to program in javascript, what you're trying to do shouldn't be too hard so you could probably do it from looking at a few javascript intro tutorials
Yeah that's what I've been
Yeah that's what I've been doing.
Knowing very little about
Knowing very little about javascript, common sense would say to me that I would just change
To...
Obviously I haven't a clue, but by eyeballing it, it seems like only 2-3 lines would need to be changed to make it work on mouse over instead of immediately playing?
you can try with that or,
you can try with that or, using different method for example
<onMouseOver="slideMethod ()" onMouseout="exampleMethod()">on the corresponding templates page, and don't forget to put javascript on it.i hope that will work perfectly...
Cheers!
Hm, can you give me a little
Hm, can you give me a little more detail? Do you mean content templates? or the node-type.tpl.php files? template.php? I'm a little confused!
Been reading and messing
Been reading and messing around all day trying to get it to work properly, and I just can't seem to get it right.
Please don't take this the
Please don't take this the wrong way as I'm only trying to help but if you posted this on a javascript discussion forum you would probably get a better answer right away as this isn't really a drupal issue, its javascript, I don't know enough javascript myself to give you the answer to the problem but other forums have people who are focused on javascript.
Ah nah man no worries. If I
Ah nah man no worries. If I post questions unrelated to Drupal directly I take it with a grain of salt if I don't hear much feedback for obviously this is JS like you said so I was just posting here by chance if someone else was interested or interested in the future we can tag team stuff like this. That's all, but thanks for the advice either way, always appreciated if someone is just trying to help right?
On a side note I went a totally different direction and have it figured out perfectly, I wanted to pull my hair out entirely multiple times and took me all day, but I have it. I'll post a link to a simple example of the final product but it's exactly what I want to the tee.
http://www.hotautoweb.com/content/test-0
if i'm not mistaken, it's in
if i'm not mistaken, it's in the page-type.tpl.php... if you want to use in front page, just use page-front.tpl.php... or maybe you could use jquery-carousel instead... more simple solution to your problem...
cheers
Do you realize there are a
Do you realize there are a number of existing slide show modules?
Yeah there are tons, but I
Yeah there are tons, but I haven't experienced any that can perform this.. www.hotautoweb.com mouse over any of the thumbnails on the front page. A combination of javascript and php finally allowed me to accomplish this. I don't know, pretty cool I thought. The code needs some cleaning up, and a little tweaking on the theme'ing, but it's going great thus far (considering I've just started picking up JS/PHP from scratch a few months ago in my spare time).
EDIT: The layout looks fine in FF, just a little off in IE, if you want to check it out, load it up in FF instead. :)
Are you talking about the
Are you talking about the border changing colors? I'm you can do that with just css, not sure if I missed something on the page that was more complicated, you can just set a rollover class in css for a DIV,
If you mouse over the
If you mouse over the thumbnails a series of images displays from the node inside (like a slideshow), and when you mouseout the original image returns. I have it all set up through some php and javascript such that I bulk upload a directory of photos to sites/default/files and I'm done. The rest is all automatic.