vendredi 22 mai 2015

Add text to image when mouse over

I'm still new to web development (coming from desktop development) and my new boss already gave me a project.

I have to surround our company logo with images that link to other products of ours. While I think I can surround the image with the logos, I want to add some text to the logos, to make it less confusing. I can imagine it to be quite... weird, for lack of a better word, if it's just a product's logo and nothing to tell the user what it is.

I have basic knowledge of PHP (I know how functions, constructors, classes, variables, etc. work, but have no real experience in it), but I don't know if this will help me in any way.

Here's an example of what I want to do (pseudo):

func onMouseOver(object m_obj) 
    m_obj.showCaption();
    m_obj.border = new Border(Effects.Glow, Colors.Blue);
end

I have no better way of demonstrating it, so sorry if it seems somewhat confusing.

If you're a Firefox user, open a new tab and hover over one of those images, I'm trying to achieve something similar to that.

The code:

  <head>
    <title>NetWork Team Vorschau</title>
    <link rel="stylesheet" type="text/css" href="index_style.css" >
  </head>

  <body>
    <div class="container" >
      <input class="sites_overview" type="image" src="http://ift.tt/1AoxXQ1" value="Übersicht: Sites" /> <!-- I want this to show text when hovered over -->
      <img class="nwt_img" src="http://ift.tt/1AoxXQ3" />
    </div>
  </body>

</html>

Cheers in advance for any and all helpful answers or pointers in the right direction!




Aucun commentaire:

Enregistrer un commentaire