Website developer - HotUKDeals
We use cookie files to improve site functionality and personalisation. By continuing to use HUKD, you accept our cookie and privacy policy.
Get the HUKD app free at Google Play

Search Error

An error occurred when searching, please try again!

Login / Sign UpSubmit

Website developer

12345678@9 Avatar
5y, 10m agoPosted 5 years, 10 months ago
Hey guys, does anybody know how to create a layered rollover image effect on Dreamweaver for a homepage? I want to make something similar to the one on the BBC homepage, where at the top they have a rollover image/ news content block...
I know you can do that on flash and import it but how can you do it on Dreamweaver?
Thanks.
12345678@9 Avatar
5y, 10m agoPosted 5 years, 10 months ago
Options

All Comments

(15) Jump to unreadPost a comment
Comments/page:
#1
If you wanted for example, one big image then three smaller images at the side, when the mouse cursor went over one of the smaller images the bigger image changed. You can do this in Dreamweaver fairly easily. Just create the layout etc, then add behaviours (Shift+F4) to the smaller images that upon mouseover they change the larger image. Referred to as swap image and swap image restore when the mouse is moved away.

Just make sure when you do the swap image that you select the correct image you want to change, then browser to the file you want to change it to.

Edited By: PhearFactor on Jan 16, 2011 13:36
#2
@PhearFactor Thanks, but I want to able to assign an hyperlink to the projected image, i.e. to another webpage....
#3
[email protected]
@PhearFactor Thanks, but I want to able to assign an hyperlink to the projected image, i.e. to another webpage....

In order to allow part of a webpage to display the contents of another site, you need to create a frame. Within the HTML code of the frame, you point it to another website. You won't even need DreamWeaver to achieve this as this is an HTML feature. Use the parameter


<FRAME src to reference another a hyperlink.

However, your original question appears to suggest something different and that you are looking to implement an animated banner. In that case, Flash animation should be used to refence a flash animation file. Why can this not be achieved in DreamWeaver?

Edit: Sorry you were asking "how" to add Flash animation using Dreamweaver. Just click Insert menu option, Media and then Flash Video. You will be presented with a dialogue box allowing you to specify various parameters such as whether the video is to be streamed or downloaded prior to playback, URL of the file and so on and so forth.


Edited By: ElliottC on Jan 16, 2011 17:39: .
#4
@ElliottC I am newbie at this, I want a rollover/ select image effect like on BBC's homepage/ TheSUN's homepage, main news kinda things...when clicked it directs the user to corresponding web page in on my site.
#5
[email protected]
@ElliottC I am newbie at this, I want a rollover/ select image effect like on BBC's homepage/ TheSUN's homepage, main news kinda things...when clicked it directs the user to corresponding web page in on my site.

OK, I will need to know where you will be sourcing the animation - would that be from another website or would it be a flash animation that you create yourself? The steps involved may not be as simple as it appears to be if you create the animation yourself since various parameters can be updated. For example, BBC Sport website may animate current football results but obviously the score needs to be shown in real time. In this situation you will need a separate package to compile SWF files based on varying parameters. In your case, the parameters are not text showing football scores but actual clickable hyperlinks.
If the animation is not parameter based, you can simply download the SWF file and use the Flash Control in DreamWeaver than I pointed out above. Remember that the Flash Control can also point to another website.

If this is too difficult to understand, I'm afraid I can't really put it any simpler. It is not really something that a novice can achieve straight away particularly if you are unaware of concepts such as parameters. You may like to consult this link for a quick overview of how to add a Flash animation (non parameter-based since this applies to precompiled animation files):

http://www.tutorialhero.com/tutorial-10-add_flash_to_your_webpage_in_dreamweaver.php

However, if you require the flash animation to be based on parameters you will need to buy in a compiler that can take in XML code (possibly generated via PHP or C# in an ASP.NET environment). The compiler will produce the necessary SWF file to be displayed in a control.

If you wish the SWF file to change based on time, that is easy. You can set a timer control to alter the URLs that point to the SWF files based on countdown timers.


Edited By: ElliottC on Jan 16, 2011 19:39: .
#6
Ok, I am sorry but was I saying I know how I can create the frame effect on flash animation. (www.youtube.com/watch?v=7mdJeGt_v0Y, which would then look like one used on the WWE home page - http://www. wwe.com) and then add it to Dreamweaver. But I was wondering how one can make it without flash... And no it’s not based on parameter, the content will static/ not going to be updating.

I just wanna to know how can I do this frame effect with image, which when clicked on will direct the user to another page on my site?


Edited By: [email protected] on Jan 16, 2011 19:43
#7
[email protected]
Ok, I am sorry but was I saying I know how I can create the frame effect on flash animation. (www.youtube.com/watch?v=7mdJeGt_v0Y, which would then look like one used on the WWE home page - http://www. wwe.com) and then add it to Dreamweaver. But I was wondering how one can make it without flash... And no it’s not based on parameter, the content will static/ not going to be updating.I just wanna to know how can I do this frame effect with image, which when clicked on will direct the user to another page on my site?

I'm not sure how you can create a Flash animation without Flash. Do you mean a scrolling list of hyperlinks with each hyperlink being represented as an icon or possibly a picture? If that is the case, I don't know enough DreamWeaver to achieve this since most of my code is ASP.NET/C#, PHP and JavaScript based. In order to achieve this, I can only think of using Flash to perform the scrolling. I could attempt to try this in JavaScript using timers but I suspect there will be various nasty side effects. There are Flash compilers available to create a single image with hyperlinks that can be scrolled but to achieve this "without Flash", I would attempt the JavaScript method but suspect that would fail.

If you wish to try it, you will need to create a timer and upon each specified interval (eg. 500 ms), update the positioning of the images specified in the HTML code in order to create an impression of the images scrolling. There is no need to handle the hyperlinks since the hyperlinks are already associated with the images. You just need to update the location of the images. Are you familiar with JavaScript DOM? You will need to navigate the DOM to access the image objects. If you have Visual Studio you can play around by debugging the JavaScript and varying the parameters (there maybe other JavaScript debuggers around but I don't know them).

As I mentioned earlier, using JavaScript may not give satisfactory results as there may be flickering and the focus of the current control (i.e. the current text input) may be taken away and spoil the whole page.

This is the limit of all I know, so unfortunately I don't know of any other way. I have very, very limited experience of DreamWeaver so if an easy option is available within DreamWeaver, then I am not aware of it, I'm afraid.
#8
Thanks. I don’t really want it to scroll, I only want the rollover layer effect which when clicked on the projected image it directs the user to another page.
#9
Oh I know what you are getting at now. I've just been to the http://www.wwe.com website and I understand now. You want a list of icons or tiled pictures associated with Hyperlinks and upon moving the mouse to the bottom the tiled pictures scroll?

That I can achieve and Flash is NOT the way to go about it.

Here are the steps:

1. Create a scrollable div tag. Ensure it is set with a scrollable parameter.
2. Use javascript to hide the scroll bar of the div tag since you do not want the user to click scroll bar but you want scrolling when the mouse is at the bottom of the list of tiled pictures.
3. Draw your pictures in the div.
4. Use javascript to intercept the onMouseOver event. In the onMouseOver event, check the coordinates of the mouse x,y position and if it is in a rectangular area at the bottom of the div then fire a scroll message to the div tag. You will need to navigate the DOM to access the div tag and then send a scroll message to it.

I am sure in DreamWeaver, you can get it to create the div tag for you rather than type it in HTML code and associate javascript events with it. I don't know "how" to do it but I know you "can" do it in DreamWeaver. As I said, I use ASP.NET to achieve this or type the code directly as HTML and JavaScript.

Edited By: ElliottC on Jan 16, 2011 20:13
#10
The best thing to use is JQuery but I think you might find it hard to setup if you have minimal experience using html/css.

http://flowplayer.org/tools/tabs/index.html

You could use this but then you would have to style everything in CSS to get the desired effect you're looking for.
#11
Thanks, do you have a tutoral for this?
#12
I don't know any, but I just did a google search and found this:

http://www.sohtanaka.com/web-design/simple-tabs-w-css-jquery/

If its of no use then search google for something like: jquery tabs tutorial

edit: you will have to go into the code view to do this I would have thought - and you would also need to setup a CSS stylesheet. I found this very useful when I first started to learn css/html:

http://css-tricks.com/video-screencasts-2/

Lots of video tutorials on all things web! :)


Edited By: Moofin on Jan 16, 2011 20:32
#13
[email protected]
Thanks, do you have a tutoral for this?

Just click on the Demos tab at the main menu. Not a tutorial but it provides you with sample code.
#14
Use iFrames and auto-scrolling.

Something like this maybe. Should be pretty easy then.

Edited By: PhearFactor on Jan 18, 2011 15:37
#15
PhearFactor
Use iFrames and auto-scrolling.Something like this maybe. Should be pretty easy then.

Would iFrames offer any extra advantage over DIVs? It's actually an age-old discussion but surely iFrames are more suitable for an external URL. Also I understand that the W3C HTML DTD does not officially support iFrames (I need to verify this though). Also clicking within the iFrame only registers within the iFrame. It's all well and good providing scrolling data within an iFrame but the handling of events within them will not affect anything outside of the iFrame (without extra javascript work).

Using the DIV method as reported earlier is just as easy but without the extra complications of iFrames.

Edited By: ElliottC on Jan 18, 2011 18:50

Post a Comment

You don't need an account to leave a comment. Just enter your email address. We'll keep it private.

...OR log in with your social account

...OR comment using your social account

Thanks for your comment! Keep it up!
We just need to have a quick look and it will be live soon.
The community is happy to hear your opinion! Keep contributing!