2012-12-27 3 views
-3

J'ai un collage d'images. Je veux pouvoir passer la souris dessus et cliquer sur "faire une photo de profil" pour en faire une photo de profil. Semblable à Facebook, si vous passez la souris sur une image, il existe des options pour éditer/aimer/commenter.comment afficher le formulaire en vol stationnaire

Merci.

J'ai ce qui suit, mais ça ne fonctionne pas.

<%= link_to image..., :id => "pic" %> 
<%= link_to "Profile Pic".... , :remote => true, :id => "pf" %> 

Jquery

$('#pic').hover(function() { 
    $('#pf').show() 
}) 
+3

Que signifie «ça ne marche pas»? –

+4

@ExplosionPills: Peut-être que c'est paresseux? Peut-être qu'il a besoin de la bonne motivation. –

+0

Peut-être la différence entre 'link_to' (première ligne, un trait de soulignement) et' link to' (deuxième ligne, un espace) est la cause ici? –

Répondre

1

Vous pouvez essayer quelque chose comme ceci:

http://jsfiddle.net/jrb9249/UsnfT/3/

Le code en ligne ressemble à ceci:

HTML:

<body> 
<div id="div_parent"> 
    <img id="myImg" src="http://s13.postimage.org/x23kf7ycz/DSC02036.jpg" 
    onMouseOver="javascript:myMouseOver()"/> 
    <div id="div_child" 
    onMouseOut="javascript:myMouseOut()"> 
     <a target="_blank" id="myLink">Make profile Picture</a> 
     <br><br> 
     <a target="_blank" id="closeLink" onclick="javascript:mytest()">Close</a>   
    </div> 
</div> 
</body> 

Javascript:

function myMouseOver(){ 
    $('#div_child').fadeIn('fast'); 
}; 

function mytest(){ 
    $('#div_child').fadeOut('fast'); 
}; 

CSS:

div 
{ 
    border:none; 
    margin:0; 
    padding:0; 
} 

#div_child a:hover 
{ 
    cursor:pointer; 
} 

#div_parent 
{ 
    position:relative; 
} 

#div_child 
{ 
    position:absolute; 
    left:155px; 
    top:0px; 
    display:none; 
    border:solid 1px gray; 
    padding:5px; 
} 

#div_parent img 
{ 
    width:150; 
    height:112; 
} 

#closeLink 
{ 
    color:blue; 
    font-size:6; 
    float:right; 
} 

#closeLink:hover 
{ 
    text-decoration:underline; 
} 

Il utilise le parent relativement positionné et placé de façon absolue l'enfant pour compenser la boîte d'options. Puis, en utilisant les fonctions simples de mouseover et onclick via jquery, l'utilisateur peut facilement voir et fermer la boîte.

J'ai essayé à l'origine d'utiliser une fonction onMouseOut pour fermer la fenêtre contextuelle, mais je ne suis pas tout à fait sûr de la façon de le faire fonctionner correctement. Le lien étroit résout cependant le problème.

Questions connexes