2009-07-24 14 views
1

Je veux changer la taille des images en javascript onmouseover.Modifier la taille du contrôle de l'image en javascript

fichiers Dim As String() = Directory.GetFiles (Server.MapPath ("~/Dossier1/Dossier2 /"), "* .jpg")

For Each File As String In files 
    File = File.Substring(File.LastIndexOf("/") + 1, File.Length) 
    'Response.Write(File & "<br>") 

    File = File & "~/Folder1/Folder2/" 

    Dim image As Image = New Image() 
    image.ImageUrl = File 
    image.Height = 50 
    image.Width = 50 
    Me.Controls.Add(image) 
    image.Attributes.add("onmouseover","change size here") 

    Panel2.controls.add(image) 
Next 

Est-il possible de le faire ici?

Voici quelques HTML

<asp:Button ID="Button1" runat="server" Text="Button" ValidationGroup = "none"/> 
          <asp:Panel ID="Panel1" runat="server" 
           style="display:none; background-color:Transparent; padding:1em 6px;" BackColor="White"> 
            <asp:Panel ID="Panel2" runat="server" style="background-color:Black;" Width="265px"> 
            <table> 
             <tr> 
              <td align="right"> 
               <asp:ImageButton ID="CancelButton" CssClass="bttnCancel" runat="server" Text="Cancel" 
               ImageUrl="~/images/bttnCancel.gif" ValidationGroup = "none" />          
              </td> 
             </tr> 
            </table> 
            </asp:Panel> 
           </asp:Panel>  
+0

Ajouter un peu de ce que le HTML ressemble quand il est envoyé au client. – BigBlondeViking

+0

est le html ajouté suffisant? – Eric

+0

Je pourrais suggérer de jeter un oeil à http://imageresizing.net, car cela vous permettra d'effectuer le redimensionnement de l'image * true *, plutôt que de simuler le javascript. Pour utiliser la bibliothèque, ajoutez simplement "? Width = 100" à l'URL de l'image à partir de votre extrait javascript. –

Répondre

4

Je recommande la définition de cette JS fonctionnalité côté cleint:

Selon la façon dont vos images sont ajoutées à la doc html. vous pouvez utiliser jQuery pour écouter les événements et modifier la taille des images ur ...

regard sur jQuery: http://docs.jquery.com/Main_Page

$(document).ready(function() { 


    $("img.thumbImg").mouseover(function() { 
    $(this).attr("height", "100").attr("width", "100"); 
    }).mouseout(function() { 
    $(this).attr("height", "50").attr("width", "50"); 
    }) 

}); 

ajouter au code derrière

image.CssClass = "thumbImg"; 

Ajouter la classe css à PANEL2

<asp:Panel ID="Panel2" runat="server" CssClass="thumbs" style="background-color:Black;" Width="265px"> 

Vous pouvez aussi simplement ajouter/supprimer CssClasses, vous devrez peut-être affiner le js pour correspondre à html ur, utilisez la documentation en ligne pour vous aider, mais c'est la réponse

+0

Je reçois une erreur attendue d'objet pour le script que vous avez recommandé ci-dessus. Est-ce que j'ai cette configuration correctement? Est-ce que Jquery sait utiliser la bonne balise img? – Eric

+0

devrait fonctionner maintenant ... pas de px sur la fin, mon mauvais ... – BigBlondeViking

Questions connexes