They are not images. They are anchor tags that have an image as the CSS
background-image property. I used anchors instead of divs so I could easily
to a hover on the anchor.
But, yes each anchor has it's own ID:
polaroid_1,polaroid_2,polaroid_3,polaroid_4.
Thanks.
On Mon, Nov 10, 2008 at 11:19 AM, Alex Mcauley <
[EMAIL PROTECTED]> wrote:
>
> do the images all have distinct IDs ?
> ----- Original Message -----
> From: "Damion B" <[EMAIL PROTECTED]>
> To: "Prototype & script.aculo.us" <
> prototype-scriptaculous@googlegroups.com>
> Sent: Monday, November 10, 2008 4:25 PM
> Subject: [Proto-Scripty] Scriptaculous Draggables on anchor tags only
> setting last declared as draggable.
>
>
> >
> > Good morning:
> >
> > I have four anchor tags set to display block and positioned
> > absolutely. For context, it is four polaroids that are supposed to be
> > able to be moved around the screen.
> >
> > I can set them individually to be a Draggable, but when I try to set
> > them all to Draggable I am only able to drag the last anchor declared
> > (new draggable()).
> >
> > I have the Scriptaculous actions in a .js filed called actions.js. I
> > have also included the js on the page (like the demo) with the same
> > results. See section below.
> >
> > The result is, like I mentioned, that only polaroid_4 is draggable.
> > As I rearrange the four functions, the last one (and the anchor that
> > it represents) is the only draggable item. Furthermore, it is
> > draggable from anywhere on the page. I don't even have to click on
> > it.
> >
> > What am I doing wrong with this. I can't seem to find much on the
> > subject.
> >
> > Feel free contact me regarding this if you need more clarification.
> >
> > Thank you.
> >
> > ************************************************* JAVASCRIPT
> > (action.js) ************************************************
> > window.onload=function(){
> > polaroid_1();
> > polaroid_2();
> > polaroid_3();
> > polaroid_4();
> > }
> > function polaroid_1(){
> > new Draggable('polaroid_1', { revert: true });
> > }
> > function polaroid_2(){
> > new Draggable('polaroid_2', { revert: true });
> > }
> > function polaroid_3(){
> > new Draggable('polaroid_3', { revert: true });
> > }
> > function polaroid_4(){
> > new Draggable('polaroid_4', { revert: true });
> > }
> > ************************************************* JAVASCRIPT
> > ************************************************
> >
> > ************************************************* HTML (index.html)
> > ************************************************
> > <!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=iso-8859-1" />
> >
> > <title>WEBSITE</title>
> > <meta name="keywords" content="">
> > <meta name="description" content="">
> > <meta name="robots" content="">
> > <meta name="pagerank" content="1">
> > <meta name="MSSmartTagsPreventParsing" content="TRUE">
> > <meta name="rating" content="general">
> > <meta name="distribution" content="global">
> > <meta name="revisit-after" content="2 days">
> > <meta name="author" content="">
> > <meta name="copyright" content=".">
> >
> > <script src="js/prototype.js" type="text/javascript"></script>
> > <script src="js/scriptaculous.js" type="text/javascript"></script>
> > <script type="text/javascript" src="http://jquery.com/src/latest/";></
> > script>
> > <script type="text/javascript" src="js/greybox.js"></script>
> > <script type="text/javascript" src="js/actions.js"></script>
> > <link href="style/tlu.css" rel="stylesheet" type="text/css"
> > media="screen" />
> > <link href="style/greybox.css" rel="stylesheet" type="text/css"
> > media="all" />
> >
> > </head>
> >
> > <body>
> > <!-- CONTAINS ALL OTHER ELEMENTS. SET TO WIDTH/HEIGHT OF BG IMAGE --
> >>
> > <div id="container">
> > <!-- TLU LOGO -->
> > <img id="tlu_logo" src="imgs/logo.png" alt="WEBSITE :. Logo" />
> > <!-- NAVIGATION WRAPPER -->
> > <div id="nav">
> > <!-- NAVIGATION ELEMENTS -->
> > <a id="nav_academics" href="" title="WEBSITE :. Academics"></a>
> > <a id="nav_athletics" href="" title="WEBSITE :. Athletics"></a>
> > <a id="nav_student_life" href="" title="WEBSITE :. Student
> > Life"></a>
> > <a id="nav_fa" href="" title="WEBSITE :. Financial Aid"></a>
> > <a id="nav_visit" href="" title="WEBSITE :. Schedule a Visit"></
> > a>
> > <a id="nav_contact" href="" title="WEBSITE :. Contact Us"></a>
> > </div>
> > <!-- POLAROIDS -->
> > <a id="polaroid_1" href="#" title="WEBSITE :. Drag Me!"></a>
> > <a id="polaroid_2" href="#" title="WEBSITE :. Drag Me!"></a>
> > <a id="polaroid_3" href="#" title="WEBSITE :. Drag Me!"></a>
> > <a id="polaroid_4" href="#" title="WEBSITE :. Drag Me!"></a>
> > </div>
> > </body>
> > </html>
> > ************************************************* HTML
> > ************************************************
> >
> > ************************************************* CSS (tlu.css)
> > ************************************************
> > /*
> > Texas Lutheran Univserity
> > Landing Page
> > Developed by:
> > Zoom Intercollegiate Marketing (Damion)
> > Date Began: 11.07.2008
> > [EMAIL PROTECTED]
> > */
> > * {
> > margin: 0;
> > padding:0;
> > }
> > /************************* BG AND CONTAINER
> > ***************************/
> > body{
> > background-image:url('../imgs/bg.jpg');
> > background-repeat: no-repeat;
> > background-position: top center;
> > background-color: #f9d913;
> > }
> > div#container{
> > width: 1066px;
> > height: 778px;
> > margin: 0 auto;
> > border: 1px solid #000;
> > }
> > /************************* LOGO ***************************/
> > img#tlu_logo{
> > margin-left: 26px;
> > float:left;
> > }
> > /************************* NAVIGATION ***************************/
> > div#nav{
> > width: 305px;
> > height: 608px;
> > margin-left: 761px;
> > position:absolute;
> > background-image:url('../imgs/nav_bg.png');
> > background-repeat: no-repeat;
> > z-index: 100;
> > }
> > /* NAVIGATION: ACADEMICS */
> > div#nav a#nav_academics{
> > display:block;
> > width: 190px;
> > height: 34px;
> > margin-top:110px;
> > margin-left:90px;
> > background-image:url('../imgs/nav_academics_off.gif');
> > background-repeat: no-repeat;
> > }
> > div#nav a#nav_academics:hover{
> > background-image:url('../imgs/nav_academics_on.gif');
> > }
> > /* NAVIGATION: ATHLETICS */
> > div#nav a#nav_athletics{
> > display:block;
> > width: 166px;
> > height: 31px;
> > margin-top:22px;
> > margin-left:110px;
> > background-image:url('../imgs/nav_athletics_off.gif');
> > background-repeat: no-repeat;
> > }
> > div#nav a#nav_athletics:hover{
> > background-image:url('../imgs/nav_athletics_on.gif');
> > }
> > /* NAVIGATION: STUDENT LIFE */
> > div#nav a#nav_student_life{
> > display:block;
> > width: 127px;
> > height: 61px;
> > margin-top:22px;
> > margin-left:130px;
> > background-image:url('../imgs/nav_student_life_off.gif');
> > background-repeat: no-repeat;
> > }
> > div#nav a#nav_student_life:hover{
> > background-image:url('../imgs/nav_student_life_on.gif');
> > }
> > /* NAVIGATION: FINANCIAL AID */
> > div#nav a#nav_fa{
> > display:block;
> > width: 156px;
> > height: 66px;
> > margin-top:21px;
> > margin-left:110px;
> > background-image:url('../imgs/nav_fa_off.gif');
> > background-repeat: no-repeat;
> > }
> > div#nav a#nav_fa:hover{
> > background-image:url('../imgs/nav_fa_on.gif');
> > }
> > /* NAVIGATION: VISIT */
> > div#nav a#nav_visit{
> > display:block;
> > width: 174px;
> > height: 75px;
> > margin-top:21px;
> > margin-left:70px;
> > background-image:url('../imgs/nav_visit_off.gif');
> > background-repeat: no-repeat;
> > }
> > div#nav a#nav_visit:hover{
> > background-image:url('../imgs/nav_visit_on.gif');
> > }
> > /* NAVIGATION: CONTACT */
> > div#nav a#nav_contact{
> > display:block;
> > width: 156px;
> > height: 25px;
> > margin-top:19px;
> > margin-left:115px;
> > background-image:url('../imgs/nav_contact_off.gif');
> > background-repeat: no-repeat;
> > }
> > div#nav a#nav_contact:hover{
> > background-image:url('../imgs/nav_contact_on.gif');
> > }
> > /********************************************** POLAROIDS
> > ******************/
> > /* POLAROID 1 */
> > a#polaroid_1{
> > position:absolute;
> > display:block;
> > width: 314px;
> > height: 341px;
> > background-image:url('../imgs/polaroid_girl_off.png');
> > margin: 255px 0 0 30px;
> > text-decoration:none;
> > z-index: 1;
> > border: 1px solid #000;
> > }
> > a#polaroid_1:hover{
> > background-image:url('../imgs/polaroid_girl_on.png');
> > }
> > /* POLAROID 2*/
> > a#polaroid_2{
> > position:absolute;
> > display:block;
> > width: 305px;
> > height: 335px;
> > background-image:url('../imgs/polaroid_building_off.png');
> > margin: 5px 0 0 500px;
> > text-decoration:none;
> > z-index: 2;
> > border: 1px solid #000;
> > }
> > a#polaroid_2:hover{
> > background-image:url('../imgs/polaroid_building_on.png');
> > }
> > /* POLAROID 3*/
> > a#polaroid_3{
> > position:absolute;
> > display:block;
> > width: 254px;
> > height: 300px;
> > background-image:url('../imgs/polaroid_prof_off.png');
> > margin: 400px 0 0 340px;
> > text-decoration:none;
> > z-index: 3;
> > border: 1px solid #000;
> > }
> > a#polaroid_3:hover{
> > background-image:url('../imgs/polaroid_prof_on.png');
> > }
> > /* POLAROID 4*/
> > a#polaroid_4{
> > position:absolute;
> > display:block;
> > width: 253px;
> > height: 298px;
> > background-image:url('../imgs/polaroid_sports_off.png');
> > margin: 463px 0 0 627px;
> > text-decoration:none;
> > z-index: 4;
> > border: 1px solid #000;
> > }
> > a#polaroid_4:hover{
> > background-image:url('../imgs/polaroid_sports_on.png');
> > }
> > ************************************************* CSS
> > ************************************************
> >
> > >
> >
>
>
> >
>
--
Sincerely,
Damion M Broadaway
816.316.0770
exit29.com
http://www.linkedin.com/in/damionbroadaway
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Prototype & script.aculo.us" group.
To post to this group, send email to prototype-scriptaculous@googlegroups.com
To unsubscribe from this group, send email to [EMAIL PROTECTED]
For more options, visit this group at
http://groups.google.com/group/prototype-scriptaculous?hl=en
-~----------~----~----~----~------~----~------~--~---
