diestler Posted February 15, 2006 Share Posted February 15, 2006 I am fairly new to web development (as I'm sure you will see if you take a look at my pages) and have a question about Rollover Images. I am using Macromedia Studio to create my site (Dreamweaver and Fireworks - haven't learned Flash yet) - but also have Adobe software if that helps explain things.Basically, I have a page that one has to keep scrolling to look at pictures:http://www.redgiantproductions.com/zombiepics.htmlWhat I want to do, is use little thumbnails and when the mouse scrolls over a specific image - it enlarges and takes over most of the screen (see links below for examples). When doing rollovers - I can only get it to make it swap same size files. So I tried using layers and slices to get it to work, but can't seem to get anywhere with it. I'm guessing this is a pretty common question and I'm hoping someone out there wil be kind enough to help out this newbie.Here is a link to a Fireworks working file of what I'm trying to accomplish - there are no slices, hotspots, or rollovers on it in it's present state - I'm just providing the link to give you a visual for what I'm trying to say.http://www.redgiantproductions.com/pics.pngI would like it to look something like this when the mouse goes over the first pic (see link below - this link is just a picture inserted on top of the lower image, it is not done through rollovers - that is what I'm trying to figure out how to do) - when the mouse moves off the pic, the big picture goes away and a new picture appears in the same location based on whatever picture the mouse is currently over. Maybe even give the bigger picture an outer glow to standout - but I'm guessing I can tweak that later, so long as I can figure out the first step.http://www.redgiantproductions.com/pics2.pngAny advice would be greatly appreciated. I have a feeling this would be much easier in Flash, but I have no idea where to begin with Flash. So any advice using Dreamweaver and/or Fireworks? Link to comment Share on other sites More sharing options...
Jonas Posted February 15, 2006 Share Posted February 15, 2006 Your best shot would be using javascript for full browser compatibility. You could also use Cascading Style Sheets, and the :hover pseudo element, but that is not interpreted by IE on anything other than links. I'd put each thumbnail in a table cell, and onmouseover, javascript should be able to change the style so that it is absolute positioned (which will take the picture out of it's table cell, not in the code, but on screen), and a top and left position, I would use the same for every image, instead of relative to where the thumbnail is, because that would make the code easier. The javascript should also blow up the image to fullsize.I'm not too skilled at javascript, and it's late, so I'm not going to even give it a try today. Maybe someone else can help you. I jotted down the idea at least I think. Link to comment Share on other sites More sharing options...
diestler Posted February 15, 2006 Author Share Posted February 15, 2006 Jonas - thanks for the reply - unfortunately I don't know how to write code in JavaScript. Are there a couple basic commands I could use to achieve this? Link to comment Share on other sites More sharing options...
Jonas Posted February 16, 2006 Share Posted February 16, 2006 I made an attempt just now, but I don't know how to make it work on more than one image. index.htmlCan anyone help? I don't know, is it possible to change an element's Id with javascript? Or can you only access an element with Id so and so?I'll move this thread to the Javascript, maybe you'll get more help there... Link to comment Share on other sites More sharing options...
scott100 Posted February 16, 2006 Share Posted February 16, 2006 This should get you going, just pass the img src of the thumbnail to a function that displays it as a large pic <html><head><script> function show(page) { var x=document.getElementById('largePic'); x.style.display="block"; x.src=page; }</script><style>img.thumbnail{cursor:pointer;height:100px;width:100px}</style></head><body><img class="thumbnail" onmouseover="show(this.src)" src="http://www.google.co.uk/logos/olympics06_luge.gif" /><br /><img class="thumbnail" onmouseover="show(this.src)" src="http://eur.i1.yimg.com/eur.yimg.com/i/eu/hp/yuk1.gif" /><br /><img class="thumbnail" onmouseover="show(this.src)" src="http://w3schools.invisionzone.com/style_images/w3sbanner.gif" /><!-- This is the large picture --><img id="largePic" src="#" style="display:none;position:absolute;top:10px;left:250px;height:300px;width:500px" /></body></html> Link to comment Share on other sites More sharing options...
Jonas Posted February 16, 2006 Share Posted February 16, 2006 Ah, so that's a way to do it. Cool, I'm gonna have to keep that as an example. :)Although, I would also make a function to hide the picture again if he mouseout's. Like this: <html><head><script type="text/javascript">function show(page) {var x=document.getElementById('largePic');x.style.display="block";x.src=page;}function hide(page) {var x=document.getElementById('largePic');x.style.display="none";x.src=page;}</script><style type="text/css">img.thumbnail{cursor:pointer;height:100px;width:100px}img#largePic {display:none;position:absolute;top:10px;left:250px;height:300px;width:500px;}</style></head><body><img class="thumbnail" onmouseover="show(this.src)" onmouseout="hide(this.src)" src="http://www.google.co.uk/logos/olympics06_luge.gif" /><br /><img class="thumbnail" onmouseover="show(this.src)" onmouseout="hide(this.src)" src="http://eur.i1.yimg.com/eur.yimg.com/i/eu/hp/yuk1.gif" /><br /><img class="thumbnail" onmouseover="show(this.src)" onmouseout="hide(this.src)" src="http://w3schools.invisionzone.com/style_images/w3sbanner.gif" /><!-- This is the large picture --><img id="largePic" src="#" /></body></html> Link to comment Share on other sites More sharing options...
scott100 Posted February 16, 2006 Share Posted February 16, 2006 Yes you've got the idea although i would do it slightly differently, you passed this.src to the hide function which is pointless because it doesn't need a parameter, i would use: onmouseout="hide()"Seen as how you only ever hide one image use this as the hide function:function hide() { document.getElementById('largePic').style.display="none";} Link to comment Share on other sites More sharing options...
diestler Posted February 16, 2006 Author Share Posted February 16, 2006 Wow - thanks for your help guys - I really appreciate it. It definitely gets me started, I will have to tweak things a bit but I think I can get it to work. If I have further questions I'll be sure to ask. Link to comment Share on other sites More sharing options...
diestler Posted March 3, 2006 Author Share Posted March 3, 2006 This is what I came up with - thanks for your help. I think it still needs some tweeking, but it is close to what I was trying to accomplish.http://www.redgiantproductions.com/zombiepics.html Link to comment Share on other sites More sharing options...
aspnetguy Posted March 3, 2006 Share Posted March 3, 2006 nice job works great. Link to comment Share on other sites More sharing options...
scott100 Posted March 3, 2006 Share Posted March 3, 2006 Yeh it works fine for me to, well done, it's good to see someone post back with a success story Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now