Using List to Swap Images

Hi, I had a quick questiong
I am fairly new to Dreamweaver and was wondering if anyone
knows of any tutorials that show how to use a List to swap an image
in the middle of the screen. For example I want to have a list with
different tile colors that will change the image of a tile that is
in the middle to that of those colors.

Sure...what you are looking for is called a "Disjointed
Rollover"
Here is a good tutorial:
http://www.dwfaq.com/tutorials/basics/disjointed.asp
Let us know if this is what you wanted.
"Yoyi3d" <[email protected]> wrote in
message
news:ercp4p$off$[email protected]..
> Hi, I had a quick questiong
>
> I am fairly new to Dreamweaver and was wondering if
anyone knows of any
> tutorials that show how to use a List to swap an image
in the middle of
> the
> screen. For example I want to have a list with different
tile colors that
> will
> change the image of a tile that is in the middle to that
of those colors.
>

Similar Messages

DreamWeaver Swap Image question

Hello!
I have created a simple swapImage page which is functioning properly (4 images).
My question is: Is it possible to make each image have it's own link?
Basically I wanted to create 4 images that act as a teaser to 4 indivdual stories and if someone
sees a story that they like they can click on it and it brings them to a page within my site for more info.
THANKS!

It is possible, but not using DW's Swap Image behavior.
To do this you'd have to use either -
Show/hide element
SetText of element
Custom javascript
The second option may be the best one. What is your skill level with HTML?

Help using swap images to swap 2 separate images

I am trying to use swap images to swap two separate images on
the same page but I can't get it to work. Here is the code for one
image, rotator. I also have a second image,rotatorB that I want to
swap different images with. I think I need two separate codes but
do not know how to do it.
Thank You

Sorry, I don't know enough about how fireworks functions - but overall, I think it's always best to create the slices in a program like fireworks, (or image ready, etc), and then build the actual page in Dreamweaver (or other web software). It's kind of like how Photoshop used to let you create the slices, then export the entire photoshop file as an html page - it would create a very basic page with multiple nested tables that were nothing but trouble...
For what it's worth - Dreamweaver makes it fairly easy to do - once you're familiar it should only take a few minutes to accomplish (once you have all of the pieces saved to the images folder).
Fireworks isn't a web-creation software - it's function is to optimize images for the web, and slice up graphics (from what I know about it, anyway...)
**Also, on a side note - there are many disadvantages to creating buttons with graphics - number one reason is down the road when a client wants to add or modify the buttons, they will need the original photoshop file - and the fonts loaded in order to accomplish... then need to save out both the on and off state for each. I've been there, and they find it very annoying (known to lose customers because of it). Secondly, search engines and Handicap accessible software can't read graphics - even if you apply "alt tags", it's not as good as having a text link. If possible, it's best to use text for the links (and creating the rollover effects with stylesheets - there are tons of examples: http://search.live.com/results.aspx?q=css+rollover&form=MS8TDF&pc=MS8TDF&src=IE-SearchBox
Hope that helps
Jesse

Using text to swap an image (disjointed rollover)

Hi,
I have some text on my page which is also a link.
It has a background colour, which changes when my mouse hovers over it.
I also want one image on the page to swap with another image when my mouse hovers over the text.
Please can someone direct me to a website which discusses how to create a disjointed rollover using TEXT rather than an image.
Thank you in advance

Stuart Smitheringale wrote: You can see the effect that I have created at this site http://www.drivertrainingcompany.com
Ideally, I would like to use CSS to create the same effect, without relying on swapping images.
As there are often many ways to produce the same effect or behavior, each with its own advantages and disadvantages, having been able to produce the effect or behavior is often more important.
Except for one matter in your page's behavior that you will probably want to change your page appears fine in the most recent versions of Safari, Firefox, and Opera. The bigger problem at this point is that you need to clean up your HTML -- something to which Murray has already alluded.
LESS THAN PERFECT BEHAVIOR
When your mouse leaves one menu item to enter into the next, the words below your menu item change as you would probably like, but the previously highlighted menu item remains highlighted. There is not a clean transition between menu items. This problem can probably be fixed with an onmouseout event.
CLEAN UP TIME
Please refer to the validation link that I have provided below. It will show you that there are structural problems in your page that can affect both the operation and appearance of your page as it is viewed in different browsers and in different versions of the same browser over time. I have only checked three of the more popular browsers for you.
SUGGESTION
Clean up your structural problems first and see if the imperfect behavior described above does not disappear. If it does not, then return with a new question, and someone will provide a fix, if you are yourself unable.
VALIDATION LINK: http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.drivertrainingcompany.com%2F
Roddy

SVG using list-style-image makes images small

Hi when using list-style-image using an svg on iOS it causes the image to be small please see https://bugs.webkit.org/show_bug.cgi?id=141367 for more details on the bug I reported on webkit bug and google have fixed it in webkit could you fix it please

Hi I have tryed this on iOS 8 and iPad and iPhone both show the image small.

Create a transparent swap image slice over an html slice

I have a 990px x 400px page divided into two halves horizontally.
The left slice is a html slice that consists of an unordered list with hrefs to various pages.
The right slice is an image that I want to put some polygon hotspots with each having a swap image behavior to swap an image over the html slice and I am unsure how to put a transparent image slice over a html slice.
Sure could use some help.
Terry

You can't overlap slices in Fireworks, as Fireworks needs to have a clearly defined, single image to export. Overlapping slices or hotspots makes that impossible. This means that, for one thing, you can't put polygon hotspots over your left slice.

IE Windows randomly fails to show swapped images preloaded

if you look at this page in IE6 Windows (did not test in
IE5):
http://ever-together.com/site/product_detail.php
and use the little numbers or next-previous arrows to swap
the main image, randomly (it seems), the
image will just not show up.
Since it seems random, you might have to try several times
before an image does not show.
Even an image that has showed before, sometimes does not show
if you just click on its corresponding
number again.
The images are preloaded using <body
onLoad="MM_PreLoadImages()">
The javascript code to swap the images is different on the
numbers, which use MM_setTextOfLayer and
on the previous-next arrows, which use a custom script, but
both randomly fail to display the images
in IE6, so I assume it is an IE bug?
Anybody encountered this problem before?
seb ( [email protected])
http://webtrans1.com | high-end web
design
Downloads: Slide Show, Directory Browser, Mailing List

<a href="#" onClick="...;return false;">
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com
- Template Triage!
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
http://www.macromedia.com/support/search/
- Macromedia (MM) Technotes
==================
"(_seb_)" <[email protected]> wrote in message
news:e3tolh$4i$[email protected]..
> (_seb_) wrote:
>> if you look at this page in IE6 Windows (did not
test in IE5):
>>
>>
http://ever-together.com/site/product_detail.php
>>
>> and use the little numbers or next-previous arrows
to swap the main
>> image, randomly (it seems), the image will just not
show up.
>> Since it seems random, you might have to try several
times before an
>> image does not show.
>> Even an image that has showed before, sometimes does
not show if you just
>> click on its corresponding number again.
>>
>> The images are preloaded using <body
onLoad="MM_PreLoadImages()">
>>
>> The javascript code to swap the images is different
on the numbers, which
>> use MM_setTextOfLayer and on the previous-next
arrows, which use a custom
>> script, but both randomly fail to display the images
in IE6, so I assume
>> it is an IE bug?
>>
>> Anybody encountered this problem before?
>>
>>
>
> ok I just remember I had the same problem before and
"solved" it by using
> <a href="#" onClick="...">
> instead of
> <a href="javascript:;" onClick="...">
> The later does NOT swap images in IE, the former does.
> Why, I am still wondering.
> And I would like it to work with "javascript:;", so that
on smaller
> screens my page is not going to jump back to the top
each time the buttons
> are pressed...
>
> Anybody knows a real solution?
>
>
>
> --
> seb ( [email protected])
>
http://webtrans1.com | high-end web
design
> Downloads: Slide Show, Directory Browser, Mailing List

How can I Change Asset names for swapped images in duplicated symbols?

I have what seems to be a bug in edge animate cc2014 in following circumstances:
1. Duplicate a symbol
2. Drag duplicate symbol onto stage.4
3. Rename symbol
4. Click to edit symbol
5. Select an image inside the symbol
6. In properties panel change path to swap the image to be used in this instance of the duplicated symbol ( I need to reuse this symbol many times and not being able to change asset names is a real problem!).
7. The names for the asset in both the timeline and the elements were auto generated at the time of duplication when try to change the names they revert back to the auto generated names.
How can I overcome this problem which is clearly a bug or a poorly thought through bit of programming by an otherwise highly competent adobe edge animate tesm
Thank in advance
David.

Again, incorrect. It's not about how I can address a specific symbol with code - no problems there - it's what the composition loads into the symbol. Try it with some complex component or sub- symbols.
Work-Around for using Duplicated and Revised symbols (symbol variants) in the SAME document. Solution.
Tedious, but easy. Low risk. Edge Animate 2014.1.1
When you duplicate a symbol comprised of symbols itself ("sub-symbols"), only the outermost symbol gets a unique name, not it's component inner symbols. Upon import of additional variants, a unique name is created in the Library/Symbols panel for the inner symbols, yet the references in the outer symbol can't update to use those unique inner-symbol names. Therefore, the composition loads the symbol with the matching name. This will be the first variant to be imported.
Make the Duplicate
Duplicate the symbol in the Library/Symbol Panel. Rename. Export.
Prepping the Symbol
Open a new document, import and place the new symbol.
Select the asset to be switched/replaced. Make the switch in the property panel. Properties/Images/Swap button. (I revised my base or source symbol to have different colored background images. This is how I created 4 color variants.)
Save the new document, of course. "Example1.an"
Export the revised symbol from the Library/Symbol Panel for safe keeping.
Return to Example1.an
Elements Panel: Work through the nested symbols, adding a preceding identifier to all symbols in the heirarchy.
*KEEP IT SIMPLE so you can easily and quickly move through the .js files in the following steps.*
Save Example1.an.
Library/Symbols Panel: Go down the list, renaming all the symbols with the same preceding identifier as was used in the Elements Panel. *I advise to stay parallel with the Elements panel. Change as little as possible.*
Disregard any odd appearance you may see on the stage for now.
Save Example1.an
Revising the Code
In Edge Code, also part of the Creative Cloud suite, or any code editor, open the two .js files for "Example1.an." found in the same folder...Edge.js and ...EdgeActions.js
...Edge.js
find "symbolName" - prepend with the identifier whatever is not already prepended.
at the same time, look for "id" nearby - prepend with the identifier whatever is not already prepended.
Save
...EdgeActions.js
First read the grey comments about not degrading the //Edge Comments.
Search the document for "//Edge symbol" - prepend whatever is not already prepended.
Carefully check all the orange text, prepending the symbol names you find. This same code can be seen in your Code Panel with the "Full Code" button.
Save
Return to Edge Animate
When prompted to Reload, say yes.
Save Example1.an
EXPORT your new top level symbol - now a fully separated asset.Now you have created a fully unique symbol, which can be used in conjunction with other variants in the same document.
Import your new, unique symbol variant it into your real document.
This is the solution if your Symptoms are:
I duplicated symbols to make different variations, but now I can't use the duplicated symbol variants together.
When I try to swap images in a duplicated symbol, it succeeds when used alone, but reverts when used with the original symbol.
My duplicated symbol works properly alone, but not when it is used with the original symbol.
My symbol seems to revert to the original source symbol.

Swap Image Behavior with Text

I am trying to figure something out but can't seem to find
it. I'm sure it must be pretty simple, but I'm stumped. Basically,
I have a main image and a few thumbnail images below it. I've
attached the Swap Image behavior to each thumb to change the main
image to a different photo and then changed the onMouseOver to
onClick.
The problem is I want to also have some photo text or caption
below the main image to change. Does anyone know how to do this
with more or less stock DW behaviors? Or if not, how to do it in
the most efficient way possible?
Thanks in advance.
-Bill

You could always embed the caption information in the image,
you know? That
would be the simplest way. Is that possible?
Alternatively you could create a series of stacked
containers, each hidden,
in the location where you want your captions. Then you would
make your
onclick event do both the image swap and the Show/Hide on the
associated
caption container (*and* a hide on all the rest of the
caption containers).
This can be pretty tedious when there are lots of images, and
you are using
only the DW User interface (as opposed to Code view). It will
also take you
into the realm of positioned elements (probably) which can be
troublesome
themselves.
Finally, if this is all too much for you, there are EXCELLENT
alternatives
over at projectseven ($) for doing something like this right
out of the box.
http://www.projectseven.com/
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
==================
"captcashew" <[email protected]> wrote in
message
news:[email protected]...
>I am trying to figure something out but can't seem to
find it. I'm sure it
>must
> be pretty simple, but I'm stumped. Basically, I have a
main image and a
> few
> thumbnail images below it. I've attached the Swap Image
behavior to each
> thumb
> to change the main image to a different photo and then
changed the
> onMouseOver
> to onClick.
>
> The problem is I want to also have some photo text or
caption below the
> main
> image to change. Does anyone know how to do this with
more or less stock
> DW
> behaviors? Or if not, how to do it in the most efficient
way possible?
>
> Thanks in advance.
>
> -Bill
>
> <p><img src="images/215-suite-2.jpg" alt="Main
Photo" name="mainImage"
> width="300" height="225" id="mainImage" /></p>
> <p> </p>
> <p> </p>
> <p><img src="images/215-suite-2.jpg"
alt="Thumbnail Photo 1"
> name="thumb1"
> width="100" height="75" id="thumb1"
>
onclick="MM_swapImage('mainImage','','images/215-suite-2.jpg',1)"
/>
> <img src="images/renovations_02-after.jpg"
alt="Thumbnail Photo 2"
> name="thumb2" width="100" height="75" id="thumb2"
>
onclick="MM_swapImage('mainImage','','images/renovations_02-after.jpg',1)"
> />
> <img src="images/renovations_03-after.jpg"
alt="Thumbnail Photo 3"
> name="thumb3" width="100" height="75" id="thumb3"
>
onclick="MM_swapImage('mainImage','','images/renovations_03-after.jpg',1)"
> /></p>
>

How use PHP to read image files from a folder and display them in Flex 3 tilelist.

Hello. I need help on displaying images from a folder dynamically using PHP and display it on FLEX 3 TileList. Im currently able to read the image files from the folder but i don't know how to display them in the TileList. This is my current code
PHP :
PHP Code:
<?php
//Open images directory
$imglist = '';
$dir = dir("C:\Documents and Settings\april09mpsip\My Documents\Flex Builder 3\PHPTEST\src\Assets\images");
//List files in images directory
while (($file = $dir->read()) !== false)
if (eregi("gif", $file) || eregi("jpg", $file) || eregi("png", $file))
echo "filename: " . $file . "\n";
$dir->close();
?>
FLEX 3 :
Code:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="pic.send();">
<mx:Script>
<![CDATA[
import mx.controls.Alert;
import mx.events.FlexEvent;
import mx.rpc.events.FaultEvent;
import mx.events.ItemClickEvent;
import mx.rpc.events.ResultEvent;
public var image:Object;
private function resultHandler(event:ResultEvent):void
image = (event.result);
ta1.text = String(event.result);
private function faultHandler(event:FaultEvent):void
ta1.text = "Fault Response from HTTPService call:\n ";
]]>
</mx:Script>
<mx:TileList x="31" y="22" initialize="init();" dataProvider = "{image}" width="630" height="149"/>
<mx:String id="phpPicture">http://localhost/php/Picture.php</mx:String>
<mx:HTTPService id="pic" url="{phpPicture}" method="POST"
result="{resultHandler(event)}" fault="{faultHandler(event)}"/>
<mx:TextArea x="136" y="325" width="182" height="221" id="ta1" editable="false"/>
<mx:Label x="136" y="297" text="List of files in the folder" width="182" height="20" fontWeight="bold" fontSize="13"/>
</mx:Application>
Thanks. Need help as soon as possbile. URGENT.

i have made some changes, in the php part too, and following is the resulting code( i tried it, and found that it works.):
PHP Code:
<?php
echo '<?xml version="1.0" encoding="utf-8"?>';
?>
<root>
<images>
<?php
//Open images directory
$dir = dir("images");
//List files in images directory
while (($file = $dir->read()) !== false)
if (eregi("gif", $file) || eregi("jpg", $file) || eregi("png", $file))
echo "<image>" . $file . "</image>"; // i expect you to use the relative path in $dir, not C:\..........
//$dir->close();
?>
</images>
</root>
Flex Code:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute"
creationComplete="callPHP();">
<mx:Script>
<![CDATA[
import mx.rpc.http.HTTPService;
import mx.controls.Alert;
import mx.events.FlexEvent;
import mx.rpc.events.FaultEvent;
import mx.events.ItemClickEvent;
import mx.collections.ArrayCollection;
import mx.rpc.events.ResultEvent;
[Bindable]
private var arr:ArrayCollection = new ArrayCollection();
private function callPHP():void
var hs:HTTPService = new HTTPService();
hs.url = 'Picture.php';
hs.addEventListener( ResultEvent.RESULT, resultHandler );
hs.addEventListener( FaultEvent.FAULT, faultHandler )
hs.send();
private function resultHandler( event:ResultEvent ):void
arr = event.result.root.images.image as ArrayCollection;
private function faultHandler( event:FaultEvent ):void
Alert.show( "Fault Response from HTTPService call:\n " );
]]>
</mx:Script>
<mx:TileList id="tilelist"
dataProvider="{arr}">
<mx:itemRenderer>
<mx:Component>
<mx:Image source="images/{data}" />
</mx:Component>
</mx:itemRenderer>
</mx:TileList>
</mx:Application>

How do i backup the list of load images automatically exceptions under Options- Content. I want to transfer to another comp without re-adding one at a time

How do i backup the list of load images automatically exceptions under Options->Content. I want to transfer to another comp without re-adding one at a time. EVen if there is no way to backup, what is the system file for Firefox that stores these, so i can transfer this file or open it in an XML or similar editor to copy them out?

The permissions.sqlite file stores 'allow' and 'block' exceptions for cookies, images, pop-up windows, and extensions (software) installation.
*http://kb.mozillazine.org/Profile_folder_-_Firefox
You can use this button to go to the Firefox profile folder:
*Help > Troubleshooting Information > Profile Directory: Show Folder
See also:
*https://support.mozilla.org/kb/Recovering+important+data+from+an+old+profile
*http://kb.mozillazine.org/Transferring_data_to_a_new_profile_-_Firefox

Generating a Movie File from a List of (JPEG) Images

Hi All!
I was trying this example:
Generating a Movie File from a List of (JPEG) Images
http://java.sun.com/products/java-media/jmf/2.1.1/solutions/JpegImagesToMovie.java
I was using the following command line with the following output:
root - /home/robertmarkbram/java/jmf/classes
$java JpegImagesToMovie -w 320 -h 240 -f 1\
-o file:///home/robertmarkbram/CoolCampus/media/jpgOut.mov\
file:///BigBrain3/pics/breakfast.jpg\
file:///BigBrain3/pics/eating.jpg\
file:///BigBrain3/pics/howto.jpg\
file:///BigBrain3/pics/jupiterp_cassini_full.jpg\
file:///BigBrain3/pics/jupiterp_cassini.jpg\
file:///BigBrain3/pics/spocamok.jpg- create processor for the image datasource ...
Setting the track format to: JPEG
- create DataSink for: file:///home/robertmarkbram/CoolCampus/media/jpgOut.mov
start processing...
- reading image file: file:///BigBrain3/pics/breakfast.jpg
- reading image file: file:///BigBrain3/pics/eating.jpg
- reading image file: file:///BigBrain3/pics/howto.jpg
- reading image file: file:///BigBrain3/pics/jupiterp_cassini_full.jpg
- reading image file: file:///BigBrain3/pics/jupiterp_cassini.jpg
- reading image file: file:///BigBrain3/pics/spocamok.jpg
Done reading all images.
java.lang.NullPointerException
at com.sun.media.multiplexer.video.QuicktimeMux.writeVideoSampleDescription(QuicktimeMux.java:936)
at com.sun.media.multiplexer.video.QuicktimeMux.writeSTSD(QuicktimeMux.java:925)
at com.sun.media.multiplexer.video.QuicktimeMux.writeSTBL(QuicktimeMux.java:905)
at com.sun.media.multiplexer.video.QuicktimeMux.writeMINF(QuicktimeMux.java:806)
at com.sun.media.multiplexer.video.QuicktimeMux.writeMDIA(QuicktimeMux.java:727)
at com.sun.media.multiplexer.video.QuicktimeMux.writeTRAK(QuicktimeMux.java:644)
at com.sun.media.multiplexer.video.QuicktimeMux.writeMOOV(QuicktimeMux.java:582)
at com.sun.media.multiplexer.video.QuicktimeMux.writeFooter(QuicktimeMux.java:519)
at com.sun.media.multiplexer.BasicMux.close(BasicMux.java:142)
at com.sun.media.BasicMuxModule.doClose(BasicMuxModule.java:172)
at com.sun.media.PlaybackEngine.doClose(PlaybackEngine.java:872)
at com.sun.media.BasicController.close(BasicController.java:261)
at com.sun.media.BasicPlayer.doClose(BasicPlayer.java:229)
at com.sun.media.BasicController.close(BasicController.java:261)
at JpegImagesToMovie.controllerUpdate(JpegImagesToMovie.java:215)
at com.sun.media.BasicController.dispatchEvent(BasicController.java:1254)
at com.sun.media.SendEventQueue.processEvent(BasicController.java:1286)
at com.sun.media.util.ThreadedEventQueue.dispatchEvents(ThreadedEventQueue.java:65)
at com.sun.media.util.ThreadedEventQueue.run(ThreadedEventQueue.java:92)
Can anyone tell me what this error message means?
Thanks for any advice!
Rob
:)

I think it does that for QuickTime if you don't define the lineStride value in the VideoFormat (lineStride = pixelStride * width).

Linking to a swapped image...help

I'm trying to set up a page that has a rightside column of thumbnail images, which, when clickedon opens a larger image in another area. I have done this using swap image. That's all set up, but now I would like to link that larger image to a different page...one with zoomify to show large details. I can't find any way in DW cs4 to do that...the only way the swapped image appears is in Live View and in Vive View the image is unselectable.
Thanks for any help.

<div id="BigPic">
    <p id="box1"><a href="" id="box1link"><img src="http://barbarabaum.com/images/BBis760px.jpg" name="largePix" width="600" height="400" id="largePix" /></a></p>
    </div>
<div id="SmlPix">
<table width="240" border="0" cellpadding="10">
<tr>
    <td width="120" align="center" valign="top"><a href="javascript:;" onclick="MM_swapImage('largePix','','http://barbarabaum.com/images/1.jpg',1);document.getElementById('box1link').href='http://w ww.great-web-sights.com';" ondblclick="MM_swapImgRestore()"><img src="http://barbarabaum.com/images/small/1.jpg" name="cvr" width="100" height="39" border="0" class="pixBox" id="cvr" /></a></td>
    <td width="120" align="center" valign="top"><a href="javascript:;" onclick="MM_swapImage('largePix','','images/2.jpg',1)" ondblclick="MM_swapImgRestore()"><img src="images/small/2 copy.jpg" width="100" height="100" border="0" class="pixBox" /></a></td>
</tr>
I must have done something wrong It's not going to your site. Do you see the problem? Thanks once again.

Two Swap Image Behaviors - Only One Swap Image Restore Works

How come?
I have a button image with a two swap image behaviors applied to it - a rollover for the OVER state and one behavior for a disjointed or "remote" rollover effect.
Both rollover effects work fine, but the disjointed or remote rollover effect does not return the button to it's original state. (I've determined this by removing the second or remote swap image behavior and testing it.)
Why doesn't this work?
All scripts are contained within the HTML page itself; no linked scripts are used.
Thanks!

Page 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">
<head>
<title>index</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript">

</script>
<style type="text/css">

</style></head>
<body bgcolor="#FFFFFF" onLoad="MM_preloadImages('images/navigation_2_over-05.gif','images/navigation_2_over-06.g if','images/navigation_2_over-07.gif','images/navigation_over-08.gif','images/navigation_o ver-09.gif','images/navigation_over-10.gif','images/team.gif','images/forms.gif','images/e xport.gif','images/consulting.gif','images/programming.gif','images/contact.gif')">
<table width="792" border="0" align="center" cellpadding="0" cellspacing="0" id="Table_01">
<tr>
<td width="792" height="126" colspan="2">
   <img id="index" src="images/index.gif" width="792" height="126" alt="" /></td>
</tr>
<tr>
<td width="792" height="34" colspan="2">
<table id="Table_01" width="792" height="34" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="34" height="34">
   <img src="images\navigation_2.gif" width="34" height="34" alt="" /></td>
<td width="426" height="34">
   <img src="images\navigation_2-02.gif" width="426" height="34" alt="" /></td>
<td width="105" height="34" id="title">
   <img src="images\blank.gif" alt="" name="blank" width="105" height="34" id="blank" /></td>
<td width="5" height="34">
   <img src="images\navigation_2-04.gif" width="5" height="34" alt="" /></td>
<td width="36" height="34">
   <img src="images\navigation_2-05.gif" alt="" width="36" height="34" id="Image1" onMouseOver="MM_swapImage('Image1','','images/navigation_2_over-05.gif',1);MM_swapImage(' blank','','images/team.gif',1)" onMouseOut="MM_swapImgRestore()" /></td>
<td width="32" height="34">
   <img src="images\navigation_2-06.gif" alt="" width="32" height="34" id="Image2" onMouseOver="MM_swapImage('Image2','','images/navigation_2_over-06.gif',1);MM_swapImage(' blank','','images/forms.gif',1)" onMouseOut="MM_swapImgRestore()" /></td>
<td width="31" height="34">
   <img src="images\navigation_2-07.gif" alt="" width="31" height="34" id="Image3" onMouseOver="MM_swapImage('Image3','','images/navigation_2_over-07.gif',1);MM_swapImage(' blank','','images/export.gif',1)" onMouseOut="MM_swapImgRestore()" /></td>
<td width="33" height="34">
   <img src="images\navigation_2-08.gif" alt="" width="33" height="34" id="Image4" onMouseOver="MM_swapImage('Image4','','images/navigation_over-08.gif',1);MM_swapImage('bl ank','','images/consulting.gif',1)" onMouseOut="MM_swapImgRestore()" /></td>
<td width="31" height="34">
   <img src="images\navigation_2-09.gif" alt="" width="31" height="34" id="Image5" onMouseOver="MM_swapImage('Image5','','images/navigation_over-09.gif',1);MM_swapImage('bl ank','','images/programming.gif',1)" onMouseOut="MM_swapImgRestore()" /></td>
<td width="42" height="34">
   <img src="images\navigation_2-10.gif" alt="" width="42" height="34" id="Image6" onMouseOver="MM_swapImage('Image6','','images/navigation_over-10.gif',1);MM_swapImage('bl ank','','images/contact.gif',1)" onMouseOut="MM_swapImgRestore()" /></td>
<td width="17" height="34">
   <img src="images\navigation_2-11.gif" width="17" height="34" alt="" /></td>
</tr>
</table>
td>
</tr>
<tr>
<td width="410" height="352">
   <img id="index003" src="images/index-03.gif" width="410" height="352" alt="" /></td>
<td width="382" height="352">
   <img id="index004" src="images/index-04.gif" width="382" height="352" alt="" /></td>
</tr>
<tr>
<td width="792" height="29" colspan="2">
   <img id="index005" src="images/index-05.gif" width="792" height="29" alt="" /></td>
</tr>
</table>
</body>
</html>
I can't publish the page and images until later tonight.
Thanks, as always.

Swap Image Looks fine in Firefox, not Safari? Can Javascript be an issue in Safari?

Hi, Im new to web design as you may guess.
I'm trying to put together a website navigation page with several swap image div tags. When I view the page in Firefox it looks fine, after the behavior is applied the page doesn't view at all in safari?
Can anyone please help with this?
I have used a lot of different images and styles (some of which are no longer relevant). Please see below for 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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<style type="text/css">

</script>
</head>
<body bgcolor="#FFFFFF" onload="MM_preloadImages('images/CorpLitRollO.png','images/DisplayGraphRollO.png','images /BrandRollOai.png','images/AdvertProRollO.png','images/PackRollO.png','images/ConPhotoRoll O.png')">
<div id="Container">
<div id="IntroText">All Introductory text here<br />
and here<br />
and here.</div>
<div id="FeatherFan">
    <div class="DGOver" id="Display Graphics"> </div>
<img src="images/FeatherFan.png" alt="Feathers Green" name="Feathers" width="800" height="405" hspace="0" vspace="0" id="Feathers" /><img src="images/ConPhotoType.png" alt="Concept Photography" width="164" height="134" class="ConPhoto" id="Image6" onmouseover="MM_swapImage('Image6','','images/ConPhotoRollO.png',1)" onmouseout="MM_swapImgRestore()" /><img src="images/AdvertProType.png" alt="Advertising and Promotions" width="134" height="158" class="AdPromo" id="Image4" onmouseover="MM_swapImage('Image4','','images/AdvertProRollO.png',1)" onmouseout="MM_swapImgRestore()" /></div>
<div class="CorpType" id="CorpLitType" onmouseover="MM_swapImage('Image1','','images/CorpLitRollO.png',1)" onmouseout="MM_swapImgRestore()"><img src="images/CorpLitType.png" alt="Corporate Literature" width="162" height="133" id="Image1" onmouseover="MM_swapImage('Image1','','images/CorpLitRollO.png',1)" onmouseout="MM_swapImgRestore()" /></div>
<div id="CorpRollO"><img src="images/CorpLitRollO.png" alt="corporate literature image" width="162" height="133" /></div>
<div class="DGOver" id="Display Graphics Image"><img src="images/DisplayGraphType.png" alt="Display Graphics" width="154" height="150" id="Image2" onmouseover="MM_swapImage('Image2','','images/DisplayGraphRollO.png',1)" onmouseout="MM_swapImgRestore()" /></div>
<div class="BOver" id="Branding"><img src="images/BrandType.png" alt="Branding" width="137" height="163" id="Image3" onmouseover="MM_swapImage('Image3','','images/BrandRollOai.png',1)" onmouseout="MM_swapImgRestore()" /></div>
<div class="Packaging" id="Packaging"></div>
</div>
<span class="Packaging"><img src="images/PackType.png" alt="Packaging" width="150" height="147" id="Image5" onmouseover="MM_swapImage('Image5','','images/PackRollO.png',1)" onmouseout="MM_swapImgRestore()" /></span>
</body>

becky ss wrote:
Hi, Im new to web design as you may guess.
Welcome to the forum. Please take a few moments to read How to get help quickly. As the advice on that page tells you, please upload your problem page to a website and provide the URL.
Since you're new to to forum, also take a moment to check out the Dreamweaver FAQ and bookmark it so you can find answers to common questions quickly.

Using List to Swap Images

Similar Messages

Maybe you are looking for