Clever Geek Handbook

Add text to image when mouse

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

I need to surround our logo with images that link to our other products. While I think I can surround the image with logos, I want to add text to the logos to make it less confusing. I can imagine that it is rather ... weird, for lack of a better word, if it's just a product 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 I have no real experience), 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 don't have a better way to demonstrate this, so sorry if this seems a little confusing.

If you are a Firefox user, open a new tab and hover over one of these images, I am trying to achieve something similar.

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://www.sites-login.de/images/logo_sites.gif" value="Übersicht: Sites" /> <!-- I want this to show text when hovered over -->
      <img class="nwt_img" src="http://www.nwt.de/images/networkteam.png" />
    </div>
  </body>

</html>

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

+3


source to share


3 answers


Just in CSS:

.one:hover::after {
content:"Text when hovered";
position:absolute;
left:0;
}

<div class="container">
    <div class="one">
        <input class="sites_overview" type="image" src="http://www.sites-login.de/images/logo_sites.gif" value="Übersicht: Sites" />
    </div>
</div>

JDFiddle



EDIT: + one with a radiant effect is possible

JSFiddle

+2


source


I think you can put

<title>Your text</title>



inside the tag <img>

.

0


source


You need to use JavaScript ( onmouseover ) method or jQuery ( . Mouseover ( )) method . jQuery is the most used JavaScript framework, check the official page. JavaScript is executed on the client side, in the browser.

Hello

0


source






More articles:


All Articles