How do I embed a Dreamweaver interactive image with rollover hotspots into a Wordpress post?

Hey guys,
I've made an image in dreamweaver will roll-over hotspots very much like this one: http://hypebeast.com/2014/6/essentials-kent-kilroe
I'd now like to embed it into a post on my website in Wordpress.
My website is not hosted locally on my computer, so I would somehow need to paste the code of the image into the HTML section of a new post on Wordpress, whilst uploading the photos to my hosting website and changing the img src links that are in the code to the new ones from my hosting.
I did all of this and it still didn't work. Could any of you tell me where I am going wrong. The code is below if that helps at all:
<!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>

<script type="text/javascript">
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
</script>


</head>
<body onload="MM_preloadImages('file:///Macintosh HD/Users/joshuabrill/Desktop/Festival Essentials/Native Union.jpg','file:///Macintosh HD/Users/joshuabrill/Desktop/Festival Essentials/UNIQLO.jpg','file:///Macintosh HD/Users/joshuabrill/Desktop/Festival Essentials/Landyatchz.jpg','file:///Macintosh HD/Users/joshuabrill/Desktop/Festival Essentials/Aark Tortoise.jpg','file:///Macintosh HD/Users/joshuabrill/Desktop/Festival Essentials/Cubitts.jpg','file:///Macintosh HD/Users/joshuabrill/Desktop/Festival Essentials/Huf Socks.jpg','file:///Macintosh HD/Users/joshuabrill/Desktop/Festival Essentials/Hentsch.jpg','file:///Macintosh HD/Users/joshuabrill/Desktop/Festival Essentials/Timex.jpg')">
<img src="file:///Macintosh HD/Users/joshuabrill/Desktop/Festival Essentials/Festival Essentials.jpg" width="1170" height="780" border="0" usemap="#Map" id="Image1" />
<map name="Map" id="Map">
<area shape="poly" coords="689,526,703,502,719,526" href="#" onmouseover="MM_swapImage('Image1','','file:///Macintosh HD/Users/joshuabrill/Desktop/Festival Essentials/Native Union.jpg',1)" onmouseout="MM_swapImgRestore()" />
<area shape="poly" coords="956,533,971,507,986,534" href="#" onmouseover="MM_swapImage('Image1','','file:///Macintosh HD/Users/joshuabrill/Desktop/Festival Essentials/UNIQLO.jpg',1)" onmouseout="MM_swapImgRestore()" />
<area shape="poly" coords="950,715,965,690,978,715" href="#" onmouseover="MM_swapImage('Image1','','file:///Macintosh HD/Users/joshuabrill/Desktop/Festival Essentials/Landyatchz.jpg',1)" onmouseout="MM_swapImgRestore()" />
<area shape="poly" coords="707,438,723,414,736,438" href="#" onmouseover="MM_swapImage('Image1','','file:///Macintosh HD/Users/joshuabrill/Desktop/Festival Essentials/Aark Tortoise.jpg',1)" onmouseout="MM_swapImgRestore()" />
<area shape="poly" coords="908,385,922,359,936,385" href="#" onmouseover="MM_swapImage('Image1','','file:///Macintosh HD/Users/joshuabrill/Desktop/Festival Essentials/Cubitts.jpg',1)" onmouseout="MM_swapImgRestore()" />
<area shape="poly" coords="583,433,596,408,612,432" href="#" onmouseover="MM_swapImage('Image1','','file:///Macintosh HD/Users/joshuabrill/Desktop/Festival Essentials/Huf Socks.jpg',1)" onmouseout="MM_swapImgRestore()" />
<area shape="poly" coords="251,754,266,728,281,753" href="#" onmouseover="MM_swapImage('Image1','','file:///Macintosh HD/Users/joshuabrill/Desktop/Festival Essentials/Hentsch.jpg',1)" onmouseout="MM_swapImgRestore()" />
<area shape="poly" coords="657,423,672,396,687,422" href="#" />
<area shape="poly" coords="657,420,672,399,686,420" href="#" onmouseover="MM_swapImage('Image1','','file:///Macintosh HD/Users/joshuabrill/Desktop/Festival Essentials/Timex.jpg',1)" onmouseout="MM_swapImgRestore()" />
</map>
</body>
</html>

I don't think WordPress allows that kind of code in posts. If you try to add all that, WP will likely filter it out. My advice is to find a WP plugin that supports tooltips on image maps.
https://www.google.com/search?q=WordPress+plugin+for+toltips+on+image+maps&ie=utf-8&oe=utf -8&aq=t&rls=org.mozilla:en-US:official&client=firefox-a&channel=sb
Nancy O.

Similar Messages

How to set color space to JPEG image with Java advance Imaging

How to set color space to JPEG image with Java advance Imaging.
is there any API in JAI which support to set color space.

I'm definately no guru, but this is how you can change it.
CTRL + ALT + Click on the part of the component that you want to change. This brings up the Hidden Dom Inspector, background of component will be surrounded with a red outline (Make sure the red outline is surrounding the part of the tabset you want to change), Now you go to properties sheet and click the ellipses next to rules property this will pop up a dialog you look in this list (At the top) to see the default style classes that are affecting the rendering of the component outlined in red. (You will be able to select different sections of a single component) then you just rewrite the style class that you want to change in your Stylesheet (You will not find the styleclass that you want to change because it is a part of your theme .jar but as long as you name it exactly the same and place in your stylesheet it will override the theme .jar style classes) it's actually very easy -- you were right should be a piece of cake for a guru. Don't have the link handy but you can check out Winston's Blog on changing Table Formatting to get this information...It is EXTREMELY useful if you want your apps to have a custom look and not default that comes with Creator Themes.
Hope this helps you out God knows others have helped me alot!
Jason

How to make a one-color fill images with masks in documents from our multiple layers ?

Hello everyone!
I`m to open PSD document with same layers. I need to:
1. Save the jpg file (preview) in a certain place
2. All layers with masks to make one-color fill instead of images with masks.
Thanks
This is way ?
var theLayers = collectLayers(app.activeDocument, []);
alert (theLayers.join("\n"));
function collectLayers (theParent, allLayers) {//---------------------------------------------------
if (!allLayers) {var allLayers = new Array}
   else {};
   for (var m = theParent.layers.length - 1; m >= 0;m--) {
      var theLayer = theParent.layers[m];
      if (theLayer.typename == "ArtLayer") {
           var bar = new Array;
           bar = theLayer.bounds
           l0= Math.abs(this.app.activeDocument.width - theLayer.bounds[2] - theLayer.bounds[0]);
           l1= Math.abs(this.app.activeDocument.height -theLayer.bounds[3] - theLayer.bounds[1]);
            if((l0+l1)>0) { // layer mask is set
                // delete this layer
                //create new layer
                //create new mask from array bar
                //fill selection
            allLayers.push(theLayer);
   return allLayers

I may not quite follow.
Would you mind posting an example (a screenshot with the Layers Panel visible for example) and an overview of the resulting images you want to produce?

How do I get a video I shot with my iphone into iMovie on my iPad?

I can see it in the cloud, but I don't see an option to download it for local editing on my ipad. In iMovie there is a cloud option for media but it only shows an iMovie folder.
So how do I get the media I shot with iPhone from the cloud to my iPad for editing?
Ipad mini retina
video shot on iPhone 6 plus

Hi TumbaSC,
I have an article for you that can help you address this question:
iMovie for iOS (iPad): Transfer video and photos between devices
http://support.apple.com/kb/PH3244
Take care, and thanks for visiting the Apple Support Communities.
Cheers,
Braden

How to print multiple copies of same image (with specific fixed dimensions) on single page

I am using Photoshop Elements 10 on Win 7 PC. I am trying to print multiple copies of one image on a single 8.5x11 sheet of paper? The images are artwork for buttons (to be used in button-making machine) so the dimensions must be exact on the duplicated images. When I select Picture Package, the images are resized to fit the dimensions in the picture package. When I select Contact Sheet, the images are resized to fit the number of columns I selected. Neither is acceptable. How can I repeat the same image on a single piece of paper without having the system re-size the image? I know that I can manually create a new PSE file and manually insert the images into this file. This is what I have been doing as a work-around. But I would hope there is a better/faster way.
Thank-you!

A variation of hatstead's method where the pictures are precisely aligned:
1. Add the picture to the blank file as hatstead described. Use the Move tool to position the picture in the upper left corner.
2. Duplicate the layer. Use the arrow keys (NOT the mouse) to move the new layer to the right.
3. Repeat step 2 until the row is filled:
4. Merge Down the 3 layers into one. Alternatively, link the 3 layers and do a Merge Linked as in this example. The end result is the pictures in the row are on one layer:
5. Duplicate the layer and use the arrow keys to move this down to the 2nd row.
6. Repeat step 5 to create additional rows.
7. Finally, to center the whole thing on the sheet, link all the row layers and position with the arrow keys.
Note that you can also custom-make your own Picture Package. Instructions for this should be somewhere in Help.

How do I stop camera raw opening images with automatic settings?

When I open an image in CS3 camera raw (through bridge) it automatically applies 50% brightness, 25% constrast and 5% fill blacks. Does anyone know how to stop this? I have already tried resetting defaults with cntrl, shft, del.

Try asking in the Camera Raw forum.
http://forums.adobe.com/community/cameraraw

How to make text appear underneath an image on rollover

Hi guys,
I woul really like to creat an effect like this site:
Showcase21
If you click on past and hover over an image, you get to see text underneath as well as the image in color.
Any thoughts on how I can make that in Muse?
Kind regards,
Lester

This can be done with the Composition Widget Tooltip Preset. The images would be created with the triggers, the text that appears would be the Target content for each.

How to create a more interactive map with DW hotspot tool

Hi - I've been asked to put together a map for my client. I want to avoid getting into GMaps and all of that and just want to make a simple one myself. Here's an explanation of what I'm trying to do:
http://designerandpublisher.com/montrose/map.html
Just trying to create a simple map like you see above so that if they clicked on a state or a point in the state, a little pop-up window comes on like you see in many interactive map applications. Can someone help me figure out how to do this with DW's hotspot tool? I'm terrible with code but I do know it would probably start with something like onclick (I think that's what it is). But even if I get that onclick code working, I'm not even sure how to incorporate it into the <map> code that DW makes for the hotspot.
Any help is appreciated. Thanks.
PS - I use DW4 and also have access to 5.5 on another computer.

Here's another way you could do it but wil get very long. Also consider Kens tooltip - probably the easiest if you don't want a 'close button'
<!DOCTYPE HTML PUBLIC">
<html>
<head>
<meta http-equiv="charset=UTF-8">
<title>Map</title>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<style>
#map {
    width: 550px;
    height: 390px;
    margin: 0 auto;
    position: relative;
#nevada {
position: absolute;
top: 150px;
left: 50px;
background-color:#FFC;
padding: 15px;
display: none;
#nevada {
position: absolute;
top: 100px;
left: 50px;
background-color:#FFC;
padding: 15px;
display: none;
.close {
    position: absolute;
    display: inline-block;
    background-color:#903;
    color: #fff;
    text-decoration: none;
    padding: 6px;
    right: 0;
    top: 0;
h2 {
    margin: 0;
    padding: 0;
p {margin: 0;
padding: 0;
</style>
<script>
$(document).ready(function() {
$('.hide').hide();
$('.newMexico').click(function() {
$('#newMexico').show();
$('.nevada').click(function() {
$('#nevada').show();
$('.close').click(function() {
$('.hide').hide();
</script>
</head>
<body>
<div id="map">

<div class="hide" id="newMexico">
<a href="#" class="close">X</a>
<h2>New Mexico</h2>
<p>Some content about New Mexico</p>
</div>

<div class="hide" id="nevada">
<a href="#" class="close">X</a>
<h2>Nevada</h2>
<p>Some content about Nevada</p>
</div>
<img src="map.png" width="550" height="390" border="0" usemap="#Map">
<map name="Map">
<area shape="poly" coords="157,176,216,183,213,246,173,241,159,244,158,249,147,247,156,177" class="newMexico" href="#">
<area shape="poly" coords="64,91,118,105,105,180,99,176,96,190,52,131,64,92" class="nevada" href="#">
</map>
</div>
</body>
</html>

How do I create a High Quality Image with a low file size???

Dear All,
I am creating an invitation in Illustrator which I then place into photshop to create a JPEG. I want to create a high quality JPEG version of it but with a low file size because I am emailing the invitation. Am I correct in placing the image into photshop or should I export it from Illustrator.
The image is built of of vectors and one JPEG but they are not high in quality.
Can anyone help me please
Thanks
Ben

The image is built of of vectors and one JPEG but they are not high in quality.
For this type of image you would probably be better choosing GIF format (now known for some reason as 'Compuserve GIF'). Taking the number of "colors' down untl it still looks high quality, and anti-aliasing is preserved.

How to set color depth to Bitmap image with Java advance Imaging

i have to convert image one format ot bmp format and also set the color depth as 1 bit , 4 bit , 8 bit, 16 bit, 32 bit of image.
has any one done this before. please help me out .

Take a look at the example code here: http://forum.java.sun.com/thread.jsp?forum=20&thread=560573&tstart=0&trange=15
I took an image that was 24 bits/pixel (I guess) and converted it to an indexed color model (8 bits/pixel).
Is that what you mean? (It's also easy to convert to 16 or 15 bits/pixel: use TYPE_USHORT_565_RGB or
TYPE_USHORT_555_RGB.)

How would you replace a solid color image with a gradient?

I am trying to figure out what I am even trying to ask, so I can search the appropriate terms, but basically I am trying to get the texture with the white background on the left to have the color replaced with the gradient on the right. Seems simple, but I can't figure it out.

Hi FloridaLegend, this is an adjustment layer grouped to the image (so you keep the original sourced image). This way you always have the original artwork you can go back to.
I added a b&w adjustment layer so you don't get the blue coming through, then I grouped to the layer (Ctrl+Alt+G) then added the blend to the layer above.
Here are some screenshots that should help:

How to use DPS for a daily newspaper with content management system like wordpress

Hi,
I am using DPS for magazines. I would like to use it urgently for a newspaper company. the content will be in form of Content Management System such as wordpress, joomla. I know i can upload html content into folios. How do I display content like The New york Times and Washington post on iPad using digital publishing suites?

Hi,
Please send me a private mail (ktukker at_sign adobe -d o t - com ) with your question and description of workflow. Can you give me some sample links of Washington Post / NYT that you are referring too?
You can combine an HTML workflow with DPS. have a look at the Shell Scenarios app; content has all be created in HTML articles.
Shell Scenarios: https://itunes.apple.com/nl/app/scenarios/id605820338?l=en&mt=8
-Klaasjan

Simlpe way to load an image with URL link into iOS with AIR

I want to be able to display an image (basically a small banner) inside my iPhone game which is loaded from my server where I can advertise new games.
What's the best way to do this?
Are there any technical issues I should be aware of?
Does it fall foul of any of Apples policies?
Thanks for any advice.

It's not at all against policy but you do need a backup plan for devices without connectivity. Package a default banner to load if there is no internet access.
Apple does not require you to ask the person permission to use the internet (like Android does). You're free to load whatever you like.
You can't load or change code regardless so don't worry about that. In fact you can only even package a SWF that contains absolutely no code, otherwise it won't load, so there's no way to change the code in an iOS app. All it can do is read something on the outside and modify its behavior via pre-written and packaged code, but you can't "load or change code" in any way.
For now, mobile apps are not getting the "premium feature" tax Adobe is putting into motion August 1st. They excluded mobile. But be warned (because you made a game and might use Stage3D, who knows) that things might become more complicated if your game is serving custom banners, you're turning a profit on it and you exceed $50,000 in sales while using premium features. Like I said though, this doesn't pertain to mobile apps, yet..

Resizable fullscreen image with rollover, possible?

Hi
Im developping a site, http://test.bagge-web.dk/index.php?option=com_content&view=article&id=70&Itemid=63, that is built on joomla. The background image resizes and what I want is to get at a rollover for the parrot in the image. My problem is that the image resizes and the parrot shifts position. Could this be achievable with flash?

It's called Rollover and can be done with HTML Snippets. Check out these threads: http://discussions.apple.com/search.jspa?threadID=&q=rollover&objID=f1193&dateRa nge=last90days&userID=&numResults=30&rankBy=10001
OT

How to print an excel file (2010 version) with multiple tabs into a pdf file with bookmarks (acrobat 9). I was able to do this easily using excel (2007 version).

Recently I got a new laptop, with excel 2010 version and acrobat 9 standard.
I could no longer print (save as) an excel file with multiple tabs into a pdf file with bookmarks.
My old computer has excel 2007 version and acrobat 9 standard.
Print an excel file into pdf with bookmarks was a piece of cake.
Both machine has the same add-in -- Acrobat PDFMaker Office COM addin
Thanks if anyone could help me with this.
Tom

You need to upgrade Acrobat to a newer version.
On Thu, Oct 30, 2014 at 4:12 PM, excel-pdf-bookmarks <

How do I embed a Dreamweaver interactive image with rollover hotspots into a Wordpress post?

Similar Messages

Maybe you are looking for