asked on

Target to a page inside an iframe

I have a page b.html that has a left sidebar with some topics. If the user click in one of these topics its description loads inside an iframe located in the same page. So this single iframe loads 10 different .html pages. In the page a.html I have an image that i want to link to one of the pages that is inside this iframe in page b.html. In other words instead of target it to the iframe i'd like to target it to one of the pages inside the iframe. Could someone please help me? I've searched a lot for it with no success. thanks in advance.

Ray Paseur

Have a look at the behavior shown here:
http://www.laprbass.com/RAY_iframe.html

These two scripts help show the essential moving parts.

<?php // RAY_iframe.html
error_reporting(E_ALL);
session_start();
?>

<a target="frame_number_one" href="/RAY_iframe.php?n=1">SET FRAME ONE</a><br/>
<a target="frame_number_one" href="/RAY_iframe.php">CLEAR FRAME ONE</a><br/>
<br/>
<a target="frame_number_two" href="/RAY_iframe.php?n=2">SET FRAME TWO</a><br/>
<a target="frame_number_two" href="/RAY_iframe.php">CLEAR FRAME TWO</a><br/>


<!-- PUT UP SOME HTML TO DEFINE THE IFRAMES -->
<iframe name="frame_number_one" src="/RAY_iframe.php">one</iframe>
<br clear="all" />
<iframe name="frame_number_two" src="/RAY_iframe.php">two</iframe>
<br clear="all" />

<!-- SHOW THE PHP SCRIPT THAT RUNS THE IFRAMES -->
<a href="/RAY_iframe.php?n=3">CLICK HERE TO SEE THE IFRAME SOURCE CODE</a>

Open in new window

<?php // RAY_iframe.php
error_reporting(E_ALL);

// BUMP THE COUNTER UP BY ONE
session_start();
if (!isset($_SESSION["kounter"])) $_SESSION["kounter"] = 0;
$_SESSION["kounter"]++;

if (empty($_GET['n']))
{
    echo "NO IFRAME NUMBER SELECTED<br/>";
    echo "THE SESSION COUNTER IS {$_SESSION["kounter"]}<br/>";
    echo "THE REFERRER IS {$_SERVER["HTTP_REFERER"]}<br/>";
    die();
}

// WRITE SOME HTML INTO THE FRAMES
if ($_GET['n'] == '1')
{
    echo "SELECTED IFRAME NUMBER ONE<br/>";
    echo "THE SESSION COUNTER IS {$_SESSION["kounter"]}<br/>";
    echo "THE REFERRER IS {$_SERVER["HTTP_REFERER"]}<br/>";
    die();
}

if ($_GET['n'] == '2')
{
    echo "SELECTED IFRAME NUMBER TWO<br/>";
    echo "THE SESSION COUNTER IS {$_SESSION["kounter"]}<br/>";
    echo "THE REFERRER IS {$_SERVER["HTTP_REFERER"]}<br/>";
    die();
}

// SHOW THE SOURCE CODE FOR THIS SCRIPT
if ($_GET['n'] == '3')
{
    highlight_file(__FILE__);
    die();
}

Open in new window

Please let me know if you have any questions, ~Ray

MarceloSr

ASKER

No. Both didn't work for my case.

Ray Paseur

Last time I checked "didn't work" was not an error message, so you will need to create an example of the code to show us the failure. The scripts I posted work correctly, as you can see by clicking on the link I posted.

Plaese follow the guidance here: http://sscce.org/

MarceloSr

ASKER

Sorry, maybe I was not clear in my question. I will try to explain again:

Inside b.html i have an iframe that has inside of it: car.html, bike.html, airplane.html, boat.html, moto.html pages. Each one is activated when I click in an option in the same page's sidebar, that has the iframe in its target.

Inside a.html I have picture1.png that when clicked need to go directly to b.html showing car.html frame. picture2.png should go directly to bike.html and so on.

Thanks.

Ray Paseur

OK, I think I understand. Please post the HTML you have now, and I'll show you how to make it render in the target iFrame.

MarceloSr

ASKER

<div role="main" class="main">

                        <section class="page-top">
                              <div class="container">
                                    <div class="row">
                                          <div class="span12">
                                                <ul class="breadcrumb">
                                                      <li><a href="index.html"><font color="#FFFFFF">Home</font></a><span class="divider">/</span></li>
                                                      <li class="active">Preços?</li>
                                                </ul>
                                          </div>
                                    </div>

                                    <div class="row">
                                          <div class="span12">
                                                <h2>Consultas</h2>
                                          </div>
                                    </div>
                              </div>
                        </section>

                        <div class="container">

                              <div class="row">
                                    <div class="span3">
                                          <aside class="sidebar">

                                                <h4>Especialidades</h4>
                                                <ul class="nav nav-list primary pull-bottom">
                                                      <li><a href="cardiologista.html" target="conteudo">Cardiologista</a></li>
                                                      <li><a href="clinico.html" target="conteudo">Clínico Geral</a></li>
                                                      <li><a href="dermato.html"target="conteudo">Dermatologista</a></li>
                                                      <li><a href="endocrino.html"target="conteudo">Endocrinologista</a></li>
                                                      <li><a href="fisio.html"target="conteudo">Fisioterapeuta</a></li>
<li><a href="gastro.html"target="conteudo">Gastroenterologista</a></li>
<li><a href="gineco.html"target="conteudo">Ginecologista</a></li>
<li><a href="nutricionista.html"target="conteudo">Nutricionista</a></li>
<li><a href="oftalmo.html"target="conteudo">Oftalmologista</a></li>
<li><a href="ortopedista.html"target="conteudo">Ortopedista</a></li>
<li><a href="otorrino.html"target="conteudo">Otorrinolaringologista</a></li>
<li><a href="pediatra.html"target="conteudo">Pediatra</a></li>
<li><a href="plastico.html"target="conteudo">Plástico</a></li>
<li><a href="psico.html"target="conteudo">Psicoterapeuta</a></li>
<li><a href="vascular.html"target="conteudo">Vascular</a></li>
<li><a href="urologista.html"target="conteudo">Urologista</a></li>
                                                </ul>
</aside>
                              </div>

<div class="spam9">

<iframe src="cardiologista.html" frameborder='0' name="conteudo" width="700" height="700">
</iframe>

                        </div>

                  </div>

</div>

Ray Paseur

I don't have any of the scripts like cardiologista.html, so that will cause a 404-not found, but that aside, it looks like the links are correctly pointed at the iframe. The link target attribute matches the iframe name attribute.
http://www.laprbass.com/RAY_temp_marcelosr.php

On your server, does the script validate correctly?
http://validator.w3.org/

MarceloSr

ASKER

Yeah. Validation ok. But that is only an iframe page that opens by default when i go to the iframe's page. That isnt a script. If you can, please take a look in my site: http://srougi.biz/drconsulta/v3

In the home I have some icons under "Nossas Especialidades" each one of that icons should point to its specific iframe inside consultas.html.

Ray Paseur

Here is the "view source" of that page. It has no target= attributes other than target="_blank" for the external links.

<!DOCTYPE html>
<!--[if IE 8]>			<html class="ie ie8"> <![endif]-->
<!--[if IE 9]>			<html class="ie ie9"> <![endif]-->
<!--[if gt IE 9]><!-->	<html> <!--<![endif]-->
	<head>
    <!--<style>
	iframe { 
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(100%);
   filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */
  filter: gray; /* IE 6-9 */
}
	</style>-->
    	<!-- Light Box -->
        <script src="js/spinners.min.js" type="text/javascript"></script>
        <script src="js/lightview.js" type="text/javascript"></script>
        <script src="js/excanvas.js" type="text/javascript"></script>
        <link rel="stylesheet" type="text/css" href="css/lightview.css"/>
        
    	<!-- Slide -->
        <link href="css/js-image-slider.css" rel="stylesheet" type="text/css" />
    	<script src="js/js-image-slider.js" type="text/javascript"></script>
    	<link href="css/generic.css" rel="stylesheet" type="text/css" />

		<!-- Basic -->
		<meta charset="utf-8">
		<title>Dr. Consulta - Consultas Médicas</title>
		<meta name="keywords" content="Dr.Consulta" />
		<meta name="description" content="Dr. Consulta">

		<!-- Mobile Metas -->
		<meta name="viewport" content="width=device-width, initial-scale=1.0">

		<!-- Web Fonts  -->
		<link href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800|Shadows+Into+Light" rel="stylesheet" type="text/css">

		<!-- Libs CSS -->
		<link rel="stylesheet" href="css/bootstrap.css">
		<link rel="stylesheet" href="css/fonts/font-awesome/css/font-awesome.css">
		<link rel="stylesheet" href="vendor/flexslider/flexslider.css" media="screen" />
		<link rel="stylesheet" href="vendor/fancybox/jquery.fancybox.css" media="screen" />

		<!-- Theme CSS -->
		<link rel="stylesheet" href="css/theme.css">
		<link rel="stylesheet" href="css/theme-elements.css">

		<!-- Current Page Styles -->
		<!--<link rel="stylesheet" href="vendor/revolution-slider/css/settings.css" media="screen" />
		<link rel="stylesheet" href="vendor/revolution-slider/css/captions.css" media="screen" />
		<link rel="stylesheet" href="vendor/circle-flip-slideshow/css/component.css" media="screen" />-->

		<!-- Custom CSS -->
		<link rel="stylesheet" href="css/custom.css">

		<!-- Skin -->
		<link rel="stylesheet" href="css/skins/blue.css">
		
		<!-- Responsive CSS -->
		<link rel="stylesheet" href="css/bootstrap-responsive.css" />
		<link rel="stylesheet" href="css/theme-responsive.css" />

		<!-- Favicons -->
		<link rel="shortcut icon" href="=favicon.ico">
		<link rel="apple-touch-icon" href="img/apple-touch-icon.png">
		<link rel="apple-touch-icon" sizes="72x72" href="img/apple-touch-icon-72x72.png">
		<link rel="apple-touch-icon" sizes="114x114" href="img/apple-touch-icon-114x114.png">
		<link rel="apple-touch-icon" sizes="144x144" href="img/apple-touch-icon-144x144.png">

		<!-- Head Libs -->
		<script src="vendor/modernizr.js"></script>

		<!--[if IE]>
			<link rel="stylesheet" href="css/ie.css">
		<![endif]-->

		<!--[if lte IE 8]>
			<script src="vendor/respond.js"></script>
		<![endif]-->

		<!-- Facebook OpenGraph Tags - Go to http://developers.facebook.com/ for more information.
		<meta property="og:title" content="Porto Website Template."/>
		<meta property="og:type" content="website"/>
		<meta property="og:url" content="http://www.crivos.com/themes/porto"/>
		<meta property="og:image" content="http://www.crivos.com/themes/porto/"/>
		<meta property="og:site_name" content="Porto"/>
		<meta property="fb:app_id" content=""/>
		<meta property="og:description" content="Porto - Responsive HTML5 Template"/>
		-->

	</head>
	<body>

		<div class="body">
			<header>
				<div class="container">
					<h1 class="logo">
						<a href="index.html">
							<img alt="Dr. Consulta" src="img/logo.png">
						</a>
					</h1>
					
					
        <nav>
                                                <ul class="nav nav-pills nav-top">
                                                                                                <li class="phone">
                                               
                                                                <span><font size=5 color="#FF6600">Agende sem demora&nbsp;</font> <i class="icon-phone"></i>
                                                                <h2>(11) 2065-1325</h2></span>
                                                        </li>
                                                </ul>
                                        </nav>
					<div class="social-icons">
						<ul class="social-icons">
							<li class="facebook"><a href="http://www.facebook.com/doutorconsulta" target="_blank" title="Facebook">Facebook</a></li>
							
							<li class="youtube"><a href="http://www.youtube.com/watch?v=jEIbyO_XPPk" target="_blank" title="Youtube">YouTube</a></li>
						</ul>
					</div>
					<nav>
						<ul class="nav nav-pills nav-main" id="mainMenu">
							<li>
								<a href="index.html">Home</a>
							</li>
							<li>
								<a href="precos.html">Preços</a>
							</li>
                            <li>
								<a href="consultas.html">Consultas</a>
							</li>
                            <li class="dropdown">
                            <a class="dropdown-toggle" href="#">
									Exames
									<i class="icon-angle-down"></i>
							</a>
                            <ul class="dropdown-menu">
									<li><a href="exames_labor.html">Exames Laboratoriais</a></li>
									<li><a href="exames_imagem.html">Exames de Imagem</a></li>
							</ul>	
							</li>
                            <li>
								<a href="quemsomos.html">Quem somos?</a>
							</li>
							<!--<li class="dropdown">
								<a class="dropdown-toggle" href="#">
									Features
									<i class="icon-angle-down"></i>
								</a>
								<ul class="dropdown-menu">
									<li class="dropdown-submenu">
										<a href="#">Blog</a>
										<ul class="dropdown-menu">
											<li><a href="blog-full-width.html">Blog Full Width</a></li>
											<li><a href="blog-large-image.html">Blog Large Image</a></li>
											<li><a href="blog-medium-image.html">Blog Medium Image</a></li>
											<li><a href="blog-post.html">Single Post</a></li>
										</ul>
									</li>
									<li><a href="feature-grid-system.html">Grid System</a></li>
									<li><a href="feature-pricing-tables.html">Pricing Tables</a></li>
									<li><a href="feature-icons.html">Icons</a></li>
									<li><a href="feature-elements.html">Elements</a></li>
									<li><a href="feature-typograpy.html">Typograpy</a></li>
								</ul>
							</li>
							<li class="dropdown">
								<a class="dropdown-toggle" href="#">
									Portfolio
									<i class="icon-angle-down"></i>
								</a>
								<ul class="dropdown-menu">
									<li><a href="portfolio-2-columns.html">2 Columns</a></li>
									<li><a href="portfolio-3-columns.html">3 Columns</a></li>
									<li><a href="portfolio-4-columns.html">4 Columns</a></li>
									<li><a href="portfolio-single-project.html">Single Project</a></li>
								</ul>
							</li>
							<li class="dropdown">
								<a class="dropdown-toggle" href="#">
									Pages
									<i class="icon-angle-down"></i>
								</a>
								<ul class="dropdown-menu">
									<li><a href="page-full-width.html">Full width</a></li>
									<li><a href="page-left-sidebar.html">Left sidebar</a></li>
									<li><a href="page-right-sidebar.html">Right sidebar</a></li>
									<li><a href="page-custom-header.html">Custom Header</a></li>
									<li><a href="page-404.html">404 Error</a></li>
									<li><a href="page-team.html">Team</a></li>
									<li><a href="page-services.html">Services</a></li>
									<li><a href="page-careers.html">Careers</a></li>
									<li><a href="page-faq.html">FAQ</a></li>
									<li><a href="sitemap.html">Sitemap</a></li>
								</ul>
							</li>-->
							<li>
								<a href="ondeestamos.html">Onde estamos?</a>
							</li>
						</ul>
					</nav>
				</div>
			</header>

			<div role="main" class="main">
				<div id="content" class="content full">

					


<div class="main-intro">
<div class="container">
<div class="row">
<div class="span9">
<!--<img src="capa.png"></img>-->
  <div id="sliderFrame">
       
        <div id="slider"><font color="#FFFF00">
                <img src="slides/image-slider-1.png" alt="<b>Você não precisa ter plano de saúde <br/>para ter o <strong>MELHOR</strong> em consultas e exames.</b> "></font>
            <img src="slides/image-slider-2.png"alt="Agendamento sem demora." />
            <img src="slides/image-slider-3.png"alt="Perto da sua casa." />
               <img src="slides/image-slider-1.png" alt="Preços baixos."></font>
            <img src="slides/image-slider-2.png"alt="Pagamento facilitado." />
            <img src="slides/image-slider-3.png"alt="A clínica médica para sua família." />

        </div>
       
    </div>

</div>

<div class="span1">	
<br/>
<p class="meia-linha">
<a class="fancybox fancybox.iframe" id="call-to-action-btn-green" href="http://drconsulta.srougi.biz/tel.html" data-fancybox-type="iframe">&nbsp;<i class="icon-phone"></i>&nbsp;&nbsp;Agende agora</a>
</p>
 
<p class="meia-linha">
  <a class="fancybox fancybox.iframe" id="call-to-action-btn-orange" href="http://srougi.biz/drconsulta/v3/contact-us.html" data-fancybox-type="iframe">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Ligamos para você</span></a>
</p>
 
<a class="fancybox fancybox.iframe" id="call-to-action-btn-pink" href="http://srougi.biz/drconsulta/v3/contact-us2.html" data-fancybox-type="iframe">&nbsp;Agende sua consulta</a>
</p>

</div>

</div>
</div>
</div>

<!--<div class="home-intro">
		  <div class="container">

						
			<p class="meia-linha"></p>
									<h3><font color="white"><center>
										Você não precisa de plano de saúde, para ter o <strong>MELHOR</strong> em consultas.
									</center></font></h3>
                                   
                                   
								<!--<div class="span4">
									<div class="get-started">
										<a href="#" class="btn btn-large btn-primary">Agende agora!</a>
										<div class="learn-more">ou <a href="index.html">saiba mais.</a></div>
									</div>
								</div>
							
		</div>
				  </div>-->
                    
                    
                    
                    <br/>
                    
                    		<div class="container">

						<div class="row center">
                        
                        <div class="span12">
						<a href="ondeestamos.html"><img hspace="50" src="box1.png"></a> 
                        <a href="precos.html"><img hspace="50" src="box2.png"></a> 
                        <a href="precos.html#exames"><img hspace="50" src="box3.png"></a>
                        </div>
						</div>

					</div>
<br/><br/><br/>
                    	

					<div class="container">

						<div class="row center">
                        <div class="span12">
						<h2 class="short">
                        
                       Você não precisa ter plano de saúde para ter o <strong>MELHOR</strong> em consultas e exames.</font></h2>
						<p class="featured lead"><font color="#000"><br/>
                        
						Acessível: cabe no seu orçamento. <strong class="inverted">Sem filas e sem espera!</strong> Queremos atender toda a sua família.
						  </p>
                           
						  </div>
						</div>

					</div>
                    
                    
                    
                    

					
<br/><br/>
					<div class="container">

						<div class="row">
							<div class="span8">
								<h2>Nossas <strong>Especialidades</strong></h2>
								<div class="row">
									<div class="span4">
										<div class="feature-box">
											<div class="feature-box-icon">
												<img src="img/icon-espec/cardio.png">
											</div>
											<div class="feature-box-info">
												<h4 class="shorter">Cardiologista</h4>
												<p class="tall">Especialista em coração.</p>
											</div>
										</div>
										<div class="feature-box">
											<div class="feature-box-icon">
												<img src="img/icon-espec/clingeral.png">
											</div>
											<div class="feature-box-info">
												<h4 class="shorter">Clínico Geral</h4>
												<p class="tall">Atende todas especialidades.</p>
											</div>
										</div>
										<div class="feature-box">
											<div class="feature-box-icon">
												<img src="img/icon-espec/dermato.png">
											</div>
											<div class="feature-box-info">
												<h4 class="shorter">Dermatologista</h4>
												<p class="tall">Especialista em doenças e cuidados da pele.</p>
											</div>
										</div>
										<div class="feature-box">
											<div class="feature-box-icon">
												<img src="img/icon-espec/gastro.png">
											</div>
											<div class="feature-box-info">
												<h4 class="shorter">Gastroenterologista</h4>
												<p class="tall">Especialista em aparelho digestivo.</p>
											</div>
										</div>
                                        
                                        <div class="feature-box">
											<div class="feature-box-icon">
												<img src="img/icon-espec/gineco.png">
											</div>
											<div class="feature-box-info">
												<h4 class="shorter">Ginecologista</h4>
												<p class="tall">Especialista em sistema reprodutor feminino.</p>
											</div>
										</div>
                                        
                                        <div class="feature-box">
											<div class="feature-box-icon">
												<img src="img/icon-espec/nutri.png">
											</div>
											<div class="feature-box-info">
												<h4 class="shorter">Nutricionista</h4>
												<p class="tall">Especialista em nutrição.</p>
											</div>
										</div>
                                        
                                        <div class="feature-box">
											<div class="feature-box-icon">
												<img src="img/icon-espec/endocrino.png">
											</div>
											<div class="feature-box-info">
												<h4 class="shorter">Endocrinologista</h4>
												<p class="tall">Especialista em glândulas endócrinas, tireóide, diabetes.</p>
											</div>
										</div>
                                         
                                        
                                        
									</div>
									<div class="span4">
										
                                        <div class="feature-box">
											<div class="feature-box-icon">
												<img src="img/icon-espec/psicotera.png">
											</div>
											<div class="feature-box-info">
												<h4 class="shorter">Psicoterapeuta</h4>
												<p class="tall">Especialista em problemas psicológicos.</p>
											</div>
										</div>
                                        
                                        <div class="feature-box">
											<div class="feature-box-icon">
												<img src="img/icon-espec/oftalmo.png">
											</div>
											<div class="feature-box-info">
												<h4 class="shorter">Oftalmologista</h4>
												<p class="tall">Especialista em olhos e na visão.</p>
											</div>
										</div>
                                        <div class="feature-box">
											<div class="feature-box-icon">
												<img src="img/icon-espec/orto.png">
											</div>
											<div class="feature-box-info">
												<h4 class="shorter">Ortopedista</h4>
												<p class="tall">Especialista em ossos, músculos e ligamentos.</p>
											</div>
										</div>
										<div class="feature-box">
											<div class="feature-box-icon">
												<img src="img/icon-espec/pedi.png">
											</div>
											<div class="feature-box-info">
												<h4 class="shorter">Pediatra</h4>
												<p class="tall">Especialista em atendimento a crianças.</p>
											</div>
										</div>
										<div class="feature-box">
											<div class="feature-box-icon">
												<img src="img/icon-espec/plastico.png">
											</div>
											<div class="feature-box-info">
												<h4 class="shorter">Plástico</h4>
												<p class="tall">Especialista em cirurgia plástica.</p>
											</div>
										</div>
                                        
                                         <div class="feature-box">
											<div class="feature-box-icon">
												<img src="img/icon-espec/otorrino.png">
											</div>
											<div class="feature-box-info">
												<h4 class="shorter">Otorrinolaringologista</h4>
												<p class="tall">Especialista em ouvido, nariz e garganta.</p>
											</div>
										</div>
                                        
										<div class="feature-box">
											<div class="feature-box-icon">
												<img src="img/icon-espec/uro.png">
											</div>
											<div class="feature-box-info">
												<h4 class="shorter">Urologista</h4>
												<p class="tall">Especialista em sistema reprodutor masculino e trato urinário.</p>
											</div>
										</div>
									</div>
								</div>
							</div>
							<div class="span4">
								<h2>E <strong>Mais</strong>...</h2>
								<div class="accordion" id="accordion">
									<div class="accordion-group">
										<div class="accordion-heading">
											<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseOne"><img src="img/icon-espec/labor.png" width="30" height="30"> Exames Laboratoriais</a>
										</div>
										<div id="collapseOne" class="accordion-body collapse in">
											<div class="accordion-inner">
												Exames e testes realizados mediante pedidos médico, visando um diagnóstico ou confirmação de uma patologia ou para um check-up (exame de rotina).
											</div>
										</div>
									</div>
									<div class="accordion-group">
										<div class="accordion-heading">
											<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo"><img src="img/icon-espec/imagem.png" width="30" height="30">  Exames de Imagem</a>
										</div>
										<div id="collapseTwo" class="accordion-body collapse">
											<div class="accordion-inner">
												Exames de ressonância magnética, ultrassonografia (ultrassom), tomografia computadorizada, raio-x.
											</div>
										</div>
									</div>
									<div class="accordion-group">
										<div class="accordion-heading">
											<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseThree"><img src="img/icon-espec/fisio.png" width="30" height="30">  Fisioterapia</a>
										</div>
										<div id="collapseThree" class="accordion-body collapse">
											<div class="accordion-inner">
												Contamos com fisioterapeustas especialistas em diagnóstico, prevenção e tratamento de disfunções cinéticas funcionais de órgãos e sistemas.
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>

						<hr class="tall" />
                        <div class="container">

						<div class="row center">
                        <div class="span12">
						<h2 class="short">
                        
                       ATENÇÃO: <strong>Não</strong> atendemos emergências!</h2>
                       </div>
                       </div>
                       </div>
                        <hr class="tall" />
                        
                        

						<!--<div class="row center">
							<div class="span12">
								<h2 class="short">We're not the only ones <strong>excited</strong> about Porto Template...</h2>
								<h4 class="lead tall">5,500 customers in 100 countries use Porto Template. Meet our customers.</h4>
							</div>
						</div>-->
						<!--<div class="row center">
							<div class="flexslider unstyled" data-plugin-options='{"directionNav":false, "animation":"slide", "slideshow": false, "maxVisibleItems": 6}'>
								<ul class="slides">
									<li>
										<div class="span2">
											<img class="mobile-max-width small" src="img/logo-client-1.jpg" alt="">
										</div>
									</li>
									<li>
										<div class="span2">
											<img class="mobile-max-width small" src="img/logo-client-2.jpg" alt="">
										</div>
									</li>
									<li>
										<div class="span2">
											<img class="mobile-max-width small" src="img/logo-client-3.jpg" alt="">
										</div>
									</li>
									<li>
										<div class="span2">
											<img class="mobile-max-width small" src="img/logo-client-4.jpg" alt="">
										</div>
									</li>
									<li>
										<div class="span2">
											<img class="mobile-max-width small" src="img/logo-client-5.jpg" alt="">
										</div>
									</li>
									<li>
										<div class="span2">
											<img class="mobile-max-width small" src="img/logo-client-6.jpg" alt="">
										</div>
									</li>
									<li>
										<div class="span2">
											<img class="mobile-max-width small" src="img/logo-client-4.jpg" alt="">
										</div>
									</li>
									<li>
										<div class="span2">
											<img class="mobile-max-width small" src="img/logo-client-2.jpg" alt="">
										</div>
									</li>
								</ul>
							</div>
						</div>-->

					</div>

					<div class="map-section">
						<section class="featured footer map">
							<div class="container">
								<div class="row">
									<div class="span6">
                                    <h2><strong>Perto</strong> de você que mora em:</h2>
                                    <ul>
                                    <h4>
                                    <li> Sacomã </li>
                                    <li> Heliópolis </li>
                                    <li> São João Clímaco </li>
                                    <li> Ipiranga </li>
                                    <li> Vila Arapuã </li>
                                    </h4>
                                    </ul>
										<!--<div class="recent-posts">
											<h2>Latest <strong>Blog</strong> Posts</h2>
											<div class="row">
												<div class="flexslider unstyled" data-plugin-options='{"directionNav":false, "animation":"slide"}'>
													<ul class="slides">
														<li>
															<div class="span3">
																<article>
																	<div class="date">
																		<span class="day">15</span>
																		<span class="month">Jan</span>
																	</div>
																	<h4><a href="blog-post.html">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</a></h4>
																	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec hendrerit vehicula est, in consequat libero. <a href="/" class="read-more">read more <i class="icon-angle-right"></i></a></p>
																</article>
															</div>
															<div class="span3">
																<article>
																	<div class="date">
																		<span class="day">15</span>
																		<span class="month">Jan</span>
																	</div>
																	<h4><a href="blog-post.html">Lorem ipsum dolor</a></h4>
																	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec hendrerit vehicula est, in consequat. <a href="/" class="read-more">read more <i class="icon-angle-right"></i></a></p>
																</article>
															</div>
														</li>
														<li>
															<div class="span3">
																<article>
																	<div class="date">
																		<span class="day">12</span>
																		<span class="month">Jan</span>
																	</div>
																	<h4><a href="blog-post.html">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</a></h4>
																	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec hendrerit vehicula est, in consequat libero. <a href="/" class="read-more">read more <i class="icon-angle-right"></i></a></p>
																</article>
															</div>
															<div class="span3">
																<article>
																	<div class="date">
																		<span class="day">11</span>
																		<span class="month">Jan</span>
																	</div>
																	<h4><a href="blog-post.html">Lorem ipsum dolor</a></h4>
																	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. <a href="/" class="read-more">read more <i class="icon-angle-right"></i></a></p>
																</article>
															</div>
														</li>
														<li>
															<div class="span3">
																<article>
																	<div class="date">
																		<span class="day">15</span>
																		<span class="month">Jan</span>
																	</div>
																	<h4><a href="blog-post.html">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</a></h4>
																	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec hendrerit vehicula est, in consequat libero. <a href="/" class="read-more">read more <i class="icon-angle-right"></i></a></p>
																</article>
															</div>
															<div class="span3">
																<article>
																	<div class="date">
																		<span class="day">15</span>
																		<span class="month">Jan</span>
																	</div>
																	<h4><a href="blog-post.html">Lorem ipsum dolor</a></h4>
																	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec hendrerit vehicula est, in consequat. <a href="/" class="read-more">read more <i class="icon-angle-right"></i></a></p>
																</article>
															</div>
														</li>
													</ul>
												</div>
												<div class="row">
													<div class="span6">
														<a class="btn btn-flat btn-mini btn-primary pull-right pull-bottom-phone" href="#">View All Posts <i class="icon-arrow-right"></i></a>
													</div>
												</div>
											</div>
										</div>-->
									</div>
									<div class="span6">
										<h2><strong>O que</strong> os pacientes dizem</h2>
										<div class="row">
											<div class="flexslider flexslider-top-title unstyled" data-plugin-options='{"controlNav":false, "slideshow": false, "animationLoop": true, "animation":"slide"}'>
												<ul class="slides">
													<li>
														<div class="span6">
															<blockquote class="testimonial">
															<p>Atendimento de primeira, com qualidade de hospital particular, por um preço que posso pagar, e sem esperar semanas ou meses para ter um diagnóstico. Parabéns ao Dr. Consulta. Uso e Recomendo.</p>
															</blockquote>
															<div class="testimonial-arrow-down"></div>
															<div class="testimonial-author">
																<div class="thumbnail thumbnail-small">
																	<img src="img/clients/client-1.jpg" alt="">
																</div>
																<p><strong>Marcelo Srougi</strong><span>Morador de Heliópolis</span></p>
															</div>
														</div>
													</li>
													<li>
														<div class="span6">
															<blockquote class="testimonial">
															<p>Vale a pena atravessar a cidade, pois sei que terei um diagnóstico rápido e preciso, com os melhores médicos do Brasil. Além de ser muito bem atendido e tratado com o devido respeito.</p>
															</blockquote>
															<div class="testimonial-arrow-down"></div>
															<div class="testimonial-author">
																<div class="thumbnail thumbnail-small">
																	<img src="img/clients/client-2.png" alt="">
																</div>
																<p><strong>Thiago Silva</strong><span>Morador de São Miguel Paulista</span></p>
															</div>
														</div>
													</li>
                                                    
                                                    <li>
														<div class="span6">
															<blockquote class="testimonial">
															<p>Muito legal poder agendar a consulta pela Internet. Já consigo ver as datas disponíveis e organizar melhor minha agenda.</p>
															</blockquote>
															<div class="testimonial-arrow-down"></div>
															<div class="testimonial-author">
																<div class="thumbnail thumbnail-small">
																	<img src="img/clients/client-3.jpg" alt="">
																</div>
																<p><strong>Lucas de Faria</strong><span>Morador de Paraisópolis</span></p>
															</div>
														</div>
													</li>
                                                    
												</ul>
											</div>
										</div>
									</div>
								</div>
							</div>
						</section>
					</div>
			  </div>
			</div>

			<footer>
				<div class="container">
					<div class="row">
						<div class="footer-ribon">
							<span>Entre em contato</span>
						</div>
						<div class="span3">
							<h4>Agende sua consulta</h4>
							<p>Agende sua consulta pelo nosso site <br/><a href="#"><strong>clicando aqui</strong></a> ou ligue pra gente no<br/> 
							tel:&nbsp;<strong> (11) 2065-1325</strong>.&nbsp;Teremos 
							prazer em atendê-lo.
                            </p>

							
						</div>
						<div class="span3">
							<h4>Como chegar</h4>
							<div>
                            
								<p><a href="https://maps.google.com.br/maps?f=q&source=embed&hl=pt&geocode=&q=Estrada+das+Lágrimas,+1712,+São+Paulo&aq=0&oq=Estrada+das+lágrimas,+1712&sll=-23.682804,-46.595546&sspn=1.400985,2.493896&ie=UTF8&hq=&hnear=Estr.+das+Lágrimas,+1712+-+Sacomã,+São+Paulo,+04232-000&t=m&ll=-23.616609,-46.593189&spn=0.018088,0.019827&z=14&iwloc=A" target="_blank"><img src="img/googlemap.png"></a></p>
                              
							</div>
						</div>
						<div class="span4">
							<div class="contact-details">
								<h4>Fale Conosco</h4>
								<ul class="contact">
									<li><p><i class="icon-map-marker"></i> <strong>Endereço:</strong> Estrada das Lagrimas, 1712</p></li>
									<li>
									  <p><i class="icon-phone"></i> <strong>Fone:</strong> (11) 2065-1325</p></li>
									<li><p><i class="icon-envelope"></i> <strong>E-mail:</strong> <a href="mailto:mail@example.com">atendimento@drconsulta.com</a></p></li>
                                    <li><p><i class="icon-time"></i> <strong>Horários:</strong> 2ª a 6ª das 7h às 18h e Sábado das 8h às 14h</p></li>
                                    <li><p><i class="icon-warning-sign"></i> <strong>FIQUE ATENTO: NÃO ATENDEMOS EMERGÊNCIAS.</strong></p></li>
                                    
								</ul>
							</div>
						</div>
						<div class="span2">
							<h4>Siga-nos</h4>
							<div class="social-icons">
								<ul class="social-icons">
								<li class="facebook"><a href="http://www.facebook.com/doutorconsulta" target="_blank" title="Facebook">Facebook</a></li>
							
							<li class="youtube"><a href="http://www.youtube.com/watch?v=jEIbyO_XPPk" target="_blank" title="YouTube">YouTube</a></li>
								</ul>
							</div>
						</div>
					</div>
				</div>
				<div class="footer-copyright">
					<div class="container">
						<div class="row">
							
							<div class="span7">
								<p>© Copyright 2013 Dr.Consulta. Todos os direitos reservados.</p>
							</div>
							<div class="span4">
							 <p>Médico responsável: Dr. César da Camara Segre - CRM 9736</p>
						</div>
					</div>
				</div>
			</footer>
		</div>

		<!-- Libs -->
		<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
		<script>window.jQuery || document.write('<script src="vendor/jquery.js"><\/script>')</script>
		<script src="vendor/jquery.easing.js"></script>
		<script src="vendor/jquery.cookie.js"></script>
		<!-- <script src="master/style-switcher/style.switcher.js"></script> -->
		<script src="vendor/bootstrap.js"></script>
		<script src="vendor/selectnav.js"></script>
		<script src="vendor/twitterjs/twitter.js"></script>
		<script src="vendor/revolution-slider/js/jquery.themepunch.plugins.js"></script>
		<script src="vendor/revolution-slider/js/jquery.themepunch.revolution.js"></script>
		<script src="vendor/flexslider/jquery.flexslider.js"></script>
		<script src="vendor/circle-flip-slideshow/js/jquery.flipshow.js"></script>
		<script src="vendor/fancybox/jquery.fancybox.js"></script>
        <script src="vendor/fancybox/jquery.fancybox.pack.js"></script>
        <script src="vendor/fancybox/jquery.fancybox.min.js"></script>
		<script src="vendor/jquery.validate.js"></script>

		<script src="js/plugins.js"></script>

		<!-- Current Page Scripts -->
		<script src="js/views/view.home.js"></script>

		<!-- Theme Initializer -->
		<script src="js/theme.js"></script>

		<!-- Custom JS -->
		<script src="js/custom.js"></script>

		<!-- Google Analytics: Change UA-XXXXX-X to be your site's ID. Go to http://www.google.com/analytics/ for more information. -->
		<!--
		<script>
			var _gaq = _gaq || [];
			_gaq.push(['_setAccount', 'UA-XXXXX-X']);
			_gaq.push(['_trackPageview']);

			(function() {
				var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
				ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
				var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
			})();
		</script>
		
<script type="text/javascript">
	$(document).ready(function() {
		$("a.fancybox").fancybox();
	});
</script>-->

<script>
$(document).ready(function() {
    $("#call-to-action-btn-green").fancybox({
          helpers: {
              title : {
                  type : 'float'
              }
          }
      });
 </script>     
	</body>
</html>

Open in new window

Here are some of the page elements from the Specialty section. As you can see there are no <a> tags, and with no links, there will not be any clickable element on the page.

								<h2>Nossas <strong>Especialidades</strong></h2>
								<div class="row">
									<div class="span4">
										<div class="feature-box">
											<div class="feature-box-icon">
												<img src="img/icon-espec/cardio.png">
											</div>
											<div class="feature-box-info">
												<h4 class="shorter">Cardiologista</h4>
												<p class="tall">Especialista em coração.</p>
											</div>
										</div>
										<div class="feature-box">
											<div class="feature-box-icon">
												<img src="img/icon-espec/clingeral.png">
											</div>
											<div class="feature-box-info">
												<h4 class="shorter">Clínico Geral</h4>
												<p class="tall">Atende todas especialidades.</p>
											</div>
										</div>
										<div class="feature-box">
											<div class="feature-box-icon">
												<img src="img/icon-espec/dermato.png">
											</div>
											<div class="feature-box-info">
												<h4 class="shorter">Dermatologista</h4>
												<p class="tall">Especialista em doenças e cuidados da pele.</p>
											</div>
										</div>

Open in new window

MarceloSr

ASKER

yeah. I released the <a> appointments because i didn't know how to point it correctly to its description in consultas.html page. If i make an an href apointment to http://srougi.biz/v3/consultas/ it will open with the first iframe page (cardiologista.html), I don't know how to poin it directly to each correct page.

Ray Paseur

Please go back to my original post and make sure you understand exactly what it is doing. You can use "view source" to look at the generated HTML. The key parts are that the link target attribute matches the iframe name attribute.

Msrougi

Already Solved!

MarceloSr

ASKER

I've requested that this question be deleted for the following reason:

Solved by myself.

Ray Paseur

Instead of deleting you question, please post your solution so others can see how you solved the problem. Then you can accept your own solution as the answer. Thanks, ~Ray

ASKER CERTIFIED SOLUTION

MarceloSr

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

MarceloSr

ASKER

Solved and working.