www.webdeveloper.com
Results 1 to 7 of 7

Thread: html image problem

Hybrid View

  1. #1
    Join Date
    Apr 2012
    Location
    Romania
    Posts
    25

    Unhappy html image problem

    Hello!
    I'm a beginer in html and i need some help,if is possible,please.
    I don't know how to make a mouseover to show me the image in another division.
    I have the navigation butons in a left div and i want ,when the mouse is on one button to show me, in the right div an image. I hope you understand what i want to say.
    Thank you in advance for yours answer!

  2. #2
    Join Date
    Sep 2006
    Location
    new york
    Posts
    254
    See http://oksenhendler.webs.com/generic...leCutPlus.html
    and http://webdocdo.tripod.com/genericRo.../multiple.html
    or http://www.auntnini.com/new/index.htm

    Name the large image (e.g., "holder") add JavaScript onmouseover or onclick on thumbnail or text to change source of holder.

    Code:
    <a href="#nogo" onmouseover="document.images['holder'].src='lighthouse.jpg'" onclick="document.images['holder'].src='lighthouse.gif'"> Lighthouse </a>

  3. #3
    Join Date
    Apr 2012
    Location
    Romania
    Posts
    25
    Thank you very much for your help, but...
    I hope you don't mind.
    I start to learn html for one mounth and I'm too short minded and now,because you are my teacher, please explain me
    I don't know how to adapt it for my page.
    This is the source code:


    <html xmlns="http://www.w3.org/1999/xhtml" lang="ro">
    <head>
    <meta name="author" content="Stefanescu_Adrian">
    <meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
    <meta name="description" content="Vacante in Bulgaria,cu cazare in diferite hoteluri,vile din Nisipurile Aurii,Albena,Pomorie.Sejuriri ieftine pe litoralul bulgaresc">
    <meta name="keywords" content="hoteluri,nisipurile de aur,albena,sunny beach, vacanta, litoral,bulgaria,cazare">
    <link rel="stylesheet" type="text/css" href="style.css"/>
    <title> Statiuni in Bulgaria </title>
    <link rel="Shortcut icon" href="imagininoi/favicon.ico"/>
    <script type="text/javascript">
    function startTime()
    {
    var today=new Date();
    var h=today.getHours();
    var m=today.getMinutes();
    var s=today.getSeconds();
    // add a zero in front of numbers<10
    m=checkTime(m);
    s=checkTime(s);
    document.getElementById('txt').innerHTML=h+":"+m+":"+s;
    t=setTimeout('startTime()',500);
    }
    function checkTime(i)
    {
    if (i<10)
    {
    i="0" + i;
    }
    return i;
    }
    </script>
    </head>
    <body onload="startTime()">
    <div id="txt"></div>
    <script type="text/javascript">
    var d = new Date()
    var time = d.getHours()
    if (time<10)
    {
    document.write("<b>Buna dimineata!</b>");
    }
    else if (time>=10 && time<16)
    {
    document.write("<b>Buna ziua!</b>");
    }
    else
    {
    document.write("<b>Buna seara!</b>");
    }
    </script>
    <div id="tot">
    <div id="header">
    <h1>Statiuni in Bulgaria</h1><br/>
    <ul>
    <li><a href="index.html" class="classname">Acasa</a></li>
    <li><a href= "statiuni.html" class="classname">Statiuni Litoral</a></li>
    <li><a href= "contact.html" class="classname">Contact</a></li>
    </ul>
    </div>
    <div id="subheader">
    <img src="imagininoi/h1.jpg" width="190" height="200"/>
    <img src="imagininoi/h2.jpg" width="200" height="200"/>
    <img src="imagininoi/h3.jpg" width="200" height="200"/>
    <img src="imagininoi/h4.jpg" width="190" height="200"/>
    </div>
    <div id="corp">
    <div id="corpststatiuni">
    <a href="ahtopol.html" class="classname">Ahtopol</a>
    <a href="burgas.html" class="classname">Burgas</a>
    <a href="goldensands.html" class="classname">Golden Sands</a>
    <a href="kiten.html" class="classname">Kiten</a>
    <a href="nesebar.html" class="classname">Nesebar</a>
    <a href="pomorie.html" class="classname">Pomorie</a>
    <a href="ravda.html" class="classname">Ravda</a>
    <a href="sozopol.html" class="classname">Sozopol</a>
    <a href="sunny.html"class="classname">Sunny Beach</a>
    <a href="varna.html" class="classname">Varna</a>
    </div>
    <div id="corpdr">
    //HERE I WANT THE PICTURES TO APPEAR
    </div>
    <div id="footer">
    <p>Copyrightę2012. Adi Stef. Toate drepturile rezervate.</p>
    </div>
    </div>
    </div>
    </body>
    </html>

    In the div "corpdr" i want to apear the pictures.
    Some words you will not understand cause are in romanian. If you want to see the page :
    hoteluri-bulgaria.webatu.com/statiuni.html
    I hope the admin wount be upset cause i put the link here,but i realy need help from the people who know.

  4. #4
    Join Date
    Nov 2002
    Posts
    2,632

  5. #5
    Join Date
    Apr 2012
    Location
    Romania
    Posts
    25
    I have,but i forgot to put it there. Sorry!

  6. #6
    Join Date
    Sep 2006
    Location
    new york
    Posts
    254

    some code

    The following ONMOUSEOVER and ONCLICK does NOT pre-load images. For pre-load see source code of previously noted links and/or http://www.josephdenaro.com/bw/index.html or http://www.josephdenaro.com/Templates/rollPOP.dwt

    Code:
    <!DOCTYPE html PUBLIC "-//w3c//DTD XHTML 1.0 Strict//EN" "www.w3.org/TR/xhtml1/DTD/xhtml-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" lang="ro">
    <head>
    <meta name="author" content="Stefanescu_Adrian">
    <meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
    <meta name="description" content="Vacante in Bulgaria,cu cazare in diferite hoteluri,vile din Nisipurile Aurii,Albena,Pomorie.Sejuriri ieftine pe litoralul bulgaresc">
    <meta name="keywords"  content="hoteluri,nisipurile de aur,albena,sunny beach, vacanta, litoral,bulgaria,cazare">
    <link rel="stylesheet" type="text/css" href="style.css"/>
    <title> Statiuni in Bulgaria </title> 
    <link rel="Shortcut icon" href="imagininoi/favicon.ico"/>
     <script type="text/javascript">
    function startTime()
    {
    var today=new Date();
    var h=today.getHours();
    var m=today.getMinutes();
    var s=today.getSeconds();
    // add a zero in front of numbers<10
    m=checkTime(m);
    s=checkTime(s);
    document.getElementById('txt').innerHTML=h+":"+m+":"+s;
    t=setTimeout('startTime()',500);
    }
    
    function checkTime(i)
    {
    if (i<10)
      {
      i="0" + i;
      }
    return i;
    }
    </script>
    </head>
    <body onload="startTime()">
    <div id="txt"></div>
    
    <script type="text/javascript">
    var d = new Date()
    var time = d.getHours()
    if (time<10)
      {
      document.write("<b>Buna dimineata!</b>");
      }
    else if (time>=10 && time<16)
      {
      document.write("<b>Buna ziua!</b>");
      }
    else
      {
      document.write("<b>Buna seara!</b>");
      }
    </script>
    
    
    <div id="tot">
            <div id="header"> 
    		         <h1>Statiuni in Bulgaria</h1><br/>
                     <ul>
    			     <li><a href="index.html" class="classname">Acasa</a></li>
                     <li><a href= "statiuni.html" class="classname">Statiuni Litoral</a></li>
    
    			     <li><a href= "contact.html" class="classname">Contact</a></li>
    		         </ul>  
    		</div>
             <div id="subheader">
             <a href="#nogo" onmouseover="document.images['holder'].src='imagininoi/h1.jpg'" onclick="document.images['holder'].src='imagininoi/h2.jpg'">  
                  <img src="imagininoi/h1.jpg" width="190" height="200" /></a>
    	    <a href="#nogo" onclick="document.images['holder'].src='imagininoi/h2.jpg'">		
                <img src="imagininoi/h2.jpg" width="200" height="200"/></a>
            <a href="#nogo" onclick="document.images['holder'].src='imagininoi/h3.jpg'">
    			<img src="imagininoi/h3.jpg" width="200" height="200"/></a>
    		
            <a href="#nogo" onclick="document.images['holder'].src='imagininoi/h4.jpg'">	
                <img src="imagininoi/h4.jpg" width="190" height="200"/></a>
    		</div>	 
            <div id="corp">
    
                 <div id="corpststatiuni"> 
    			   <a href="ahtopol.html" onmouseover="document.images['holder'].src='imagininoi/h1.jpg'" class="classname">Ahtopol</a>
    			    <a href="burgas.html"  onmouseover="document.images['holder'].src='imagininoi/h2.jpg'" class="classname">Burgas</a>
    			    <a href="goldensands.html" onmouseover="document.images['holder'].src='imagininoi/h3.jpg'" class="classname">Golden Sands</a>
    			    <a href="kiten.html" onmouseover="document.images['holder'].src='imagininoi/h4.jpg'" class="classname">Kiten</a>
                    <a href="nesebar.html" class="classname">Nesebar</a>
    			    <a href="pomorie.html" class="classname">Pomorie</a>
    
    			     <a href="ravda.html" class="classname">Ravda</a>
    				 <a href="sozopol.html" class="classname">Sozopol</a>
    				<a href="sunny.html"class="classname">Sunny Beach</a>
    				 <a href="varna.html" class="classname">Varna</a>
    		 </div>
    			  <div id="corpdr"><!--do NOT include width & height if images are different sizes -->
                  <h4> images change here on roll-over or onClick</h4>
                  <img name="holder" id="holder" src="imagininoi/h1.jpg" alt="" />
    			
    				</div>	
    			 
    			 <div id="footer">
    
    			 <p>Copyright&#169;2012. Adi Stef. Toate drepturile rezervate.</p>
    			</div>
            </div>
     </div>
     </body>
    </html>
    <!-- www.**********.com Analytics Code -->
    <script type="text/javascript" src="http://stats.hosting24.com/count.php"></script>
    <noscript><a href="http://www.hosting24.com/"><img src="http://stats.hosting24.com/count.php" alt="web hosting" /></a></noscript>
    
    <!-- End Of Analytics Code -->
    Last edited by auntnini; 04-25-2012 at 06:31 PM. Reason: add color

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles