Jump to content


Photo

Importing Image Mapping Into Rapidweaver

Started by wdecock, Dec 11 2010 10:10 AM

  • This topic is locked This topic is locked
2 replies to this topic

#1 wdecock

wdecock

    RAGE Newbie

  • RAGE Members
  • Pip
  • 1 posts

Posted 11 December 2010 - 10:10 AM

Hi,

I am new (that already sounds like an excuse...lol) I have read all the topics, watched the Vids on how to import an image map in RapidWeaver... and it seemed like a piece of cake... Well I have done it all, and the result is I don't see the pic. I see the hotspots when i scroll over them and the links work. I guess it is a problem of where I put the image ... but I did exactly what it said in the vid...Preference : create for RapidWeaver, export to web as Effect map...etc....so why??? :angry:
:D Thanks in advance for your help :rolleyes:

W

#2 RageSW

RageSW

    Administrator

  • RAGE Admin
  • PipPipPipPipPip
  • 2,067 posts

Posted 14 December 2010 - 11:22 AM

Hi,

I am new (that already sounds like an excuse...lol) I have read all the topics, watched the Vids on how to import an image map in RapidWeaver... and it seemed like a piece of cake... Well I have done it all, and the result is I don't see the pic. I see the hotspots when i scroll over them and the links work. I guess it is a problem of where I put the image ... but I did exactly what it said in the vid...Preference : create for RapidWeaver, export to web as Effect map...etc....so why??? :angry:
:D Thanks in advance for your help :rolleyes:

W


Your relative paths are probably not pointing to the right location. Read user guide under the Help menu which explains relative paths and then make the adjustments in your code.

#3 TomDecembre

TomDecembre

    RAGE Newbie

  • RAGE Members
  • Pip
  • 1 posts

Posted 31 January 2011 - 01:06 PM

Hi,
I feel very dummy, but I have to say that sometimes I don't understand very well english when the sound track is not very good. However, I built a page with MapDesign, and I want to use it as index.html page on my website. I exported the page and tried to import it in RW. I've been watching the vid quite a lot of times,I think I understood the first part, ie image setting, but, as I use RW 5, I did'nt find the Assets Folder, so I imported my image using the Add Resource functionality.
At This point, I must say I was not sure to have well understood, so I copied/pasted the part of the code between <style> and</style> into the CSS place in RW, and then I'm stuck because I did'nt understand at all what to do with the rest of the code.
can anyone help me???
Many thanks by advance
For information, here is the code of the page I want to import:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR...ml4/loose.dtd">
<html>
<head>
<title>RAGE MapDesign</title>
<meta http-equiv="content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
#rage_css_map {
background-image: url(assets/rage_css_imagemap0.jpg);
height: 842px;
width: 595px;
position:relative;
}


#rage_css_map #shapes a {
position:absolute;
text-decoration:none;
}


#rage_css_map #shapes a span {
visibility:hidden;
}


#shapes a#rage_ostéopathie{
top: 263px;
left: 225px;
width: 137px;
height: 39px;
background-image: none;
}


#shapes a#rage_ostéopathie:hover{
border: 1px solid #000000;
background-image: none;
}


#shapes a#rage_ostéopathie:active{
background-image: none;
}


#shapes a#rage_soufflevoix{
top: 278px;
left: 393px;
width: 77px;
height: 47px;
background-image: none;
}


#shapes a#rage_soufflevoix:hover{
border: 1px solid #000000;
background-image: none;
}


#shapes a#rage_soufflevoix:active{
background-image: none;
}


#shapes a#rage_suividegrossesse{
top: 347px;
left: 435px;
width: 114px;
height: 42px;
background-image: none;
}


#shapes a#rage_suividegrossesse:hover{
border: 1px solid #000000;
background-image: none;
}


#shapes a#rage_suividegrossesse:active{
background-image: none;
}


#shapes a#rage_groupesdeparole{
top: 416px;
left: 446px;
width: 103px;
height: 41px;
background-image: none;
}


#shapes a#rage_groupesdeparole:hover{
border: 1px solid #000000;
background-image: none;
}


#shapes a#rage_groupesdeparole:active{
background-image: none;
}


#shapes a#rage_massagebébés{
top: 502px;
left: 430px;
width: 91px;
height: 43px;
background-image: none;
}


#shapes a#rage_massagebébés:hover{
border: 1px solid #000000;
background-image: none;
}


#shapes a#rage_massagebébés:active{
background-image: none;
}


#shapes a#rage_rééducation{
top: 571px;
left: 433px;
width: 141px;
height: 49px;
background-image: none;
}


#shapes a#rage_rééducation:hover{
border: 1px solid #000000;
background-image: none;
}


#shapes a#rage_rééducation:active{
background-image: none;
}


#shapes a#rage_abdos{
top: 636px;
left: 280px;
width: 72px;
height: 37px;
background-image: none;
}


#shapes a#rage_abdos:hover{
border: 1px solid #000000;
background-image: none;
}


#shapes a#rage_abdos:active{
background-image: none;
}


#shapes a#rage_psycho{
top: 620px;
left: 180px;
width: 76px;
height: 41px;
background-image: none;
}


#shapes a#rage_psycho:hover{
border: 1px solid #000000;
background-image: none;
}


#shapes a#rage_psycho:active{
background-image: none;
}


#shapes a#rage_yoga{
top: 584px;
left: 100px;
width: 71px;
height: 31px;
background-image: none;
}


#shapes a#rage_yoga:hover{
border: 1px solid #000000;
background-image: none;
}


#shapes a#rage_yoga:active{
background-image: none;
}


#shapes a#rage_allaitement{
top: 513px;
left: 20px;
width: 142px;
height: 53px;
background-image: none;
}


#shapes a#rage_allaitement:hover{
border: 1px solid #000000;
background-image: none;
}


#shapes a#rage_allaitement:active{
background-image: none;
}


#shapes a#rage_portage{
top: 424px;
left: 27px;
width: 126px;
height: 62px;
background-image: none;
}


#shapes a#rage_portage:hover{
border: 1px solid #000000;
background-image: none;
}


#shapes a#rage_portage:active{
background-image: none;
}


#shapes a#rage_préparation{
top: 330px;
left: 29px;
width: 129px;
height: 76px;
background-image: none;
}


#shapes a#rage_préparation:hover{
border: 1px solid #000000;
background-image: none;
}


#shapes a#rage_préparation:active{
background-image: none;
}


#shapes a#rage_acupuncture{
top: 295px;
left: 74px;
width: 142px;
height: 34px;
background-image: none;
}


#shapes a#rage_acupuncture:hover{
border: 1px solid #000000;
background-image: none;
}


#shapes a#rage_acupuncture:active{
background-image: none;
}


#shapes a#rage_espaceperinat-nation{
top: 92px;
left: 64px;
width: 444px;
height: 40px;
background-image: none;
}


#shapes a#rage_espaceperinat-nation:hover{
border: 1px solid #000000;
background-image: none;
}


#shapes a#rage_espaceperinat-nation:active{
background-image: none;
}


#shapes a#rage_etencore{
top: 622px;
left: 371px;
width: 82px;
height: 47px;
background-image: none;
}


#shapes a#rage_etencore:hover{
border: 1px solid #000000;
background-image: none;
}


#shapes a#rage_etencore:active{
background-image: none;
}


</style>
</head>


<body>

<div id="rage_css_map">
<div id="shapes">
<a href="file://localhost/Users/pierre/Sites/site%20perinat/osteo/index.html" id="rage_ostéopathie"><span></span></a>
<a href="file://localhost/Users/pierre/Sites/site%20perinat/souffle/index.html" id="rage_soufflevoix"><span></span></a>
<a href="file://localhost/Users/pierre/Sites/site%20perinat/prepa/index.html" id="rage_suividegrossesse"><span></span></a>
<a href="file://localhost/Users/pierre/Sites/site%20perinat/psycho/index.html" id="rage_groupesdeparole"><span></span></a>
<a href="file://localhost/Users/pierre/Sites/site%20perinat/portage/index.html" id="rage_massagebébés"><span></span></a>
<a href="file://localhost/Users/pierre/Sites/site%20perinat/reeduc/index.html" id="rage_rééducation"><span></span></a>
<a href="file://localhost/Users/pierre/Sites/site%20perinat/reeduc/index.html" id="rage_abdos"><span></span></a>
<a href="file://localhost/Users/pierre/Sites/site%20perinat/psycho/index.html" id="rage_psycho"><span></span></a>
<a href="file://localhost/Users/pierre/Sites/site%20perinat/yoga/index.html" id="rage_yoga"><span></span></a>
<a href="file://localhost/Users/pierre/Sites/site%20perinat/allaitement/index.html" id="rage_allaitement"><span></span></a>
<a href="file://localhost/Users/pierre/Sites/site%20perinat/portage/index.html" id="rage_portage"><span></span></a>
<a href="file://localhost/Users/pierre/Sites/site%20perinat/prepa/index.html" id="rage_préparation"><span></span></a>
<a href="file://localhost/Users/pierre/Sites/site%20perinat/acu/index.html" id="rage_acupuncture"><span></span></a>
<a href="file://localhost/Users/pierre/Sites/site%20perinat/quisommesnous/index.html" id="rage_espaceperinat-nation"><span></span></a>
<a href="file://localhost/Users/pierre/Sites/site%20perinat/Etc.../index.html" id="rage_etencore"><span></span></a>
</div>
</div>

</body>
</html>
Back to ButtonDesign & MapDesign


0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users

  1. RAGE Mac OS X SEO Discussion Board
  2. → Website Development & Promotion
  3. → ButtonDesign & MapDesign