I would like to give the user the option via drop down to have the links on an image map open in either a new page or an iframe which is on the same page just below the image map.
With the code I have both things are happening when either option is selected.
The session variable is set correctly by the dropdown and when I view source, the HTML is adjusted with the target coming from the session variable.
I'm using a PHP MVC.
Select box(tour.php);
<select id="dropdown1" class="select" tabindex="2" onchange="run(this)">
<option value="select">Please Select</option>
<option value="iframe_tour">Open Tour Below Map</option>
<option value="_blank">Open Tour in New Tab</option>
</select>
<input id="mapoption" name="mapoption" id="mapoption" value="<?=$_POST['mapoption']?>" hidden />
Section of image map(tour.php);
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 2808 1670">
<image width="2808" height="1670" xlink:href="<?php echo URLROOT; ?>/public/img/map-v2.png"></image>
<a xlink:href="<?php echo URLROOT; ?>/public/tours/beta/index.html#POI_50" id="map_link" target="<?php echo($_SESSION['mapoption']); ?>">
<rect x="2282" y="430" fill="#fff" opacity="0" width="50" height="50"></rect>
</a>
<a xlink:href="<?php echo URLROOT; ?>/public/tours/beta/index.html#POI_111" id="map_link" target="<?php echo($_SESSION['mapoption']); ?>">
<rect x="1428" y="1242" fill="#fff" opacity="0" width="50" height="50"></rect>
</a>
</svg>
Page controller(Pages.php);
public function tour(){
if(!isLoggedIn()){
redirect('users/login');
}
if($_SERVER['REQUEST_METHOD'] == 'POST'){
$_SESSION['mapoption'] = $_POST['mapoption'];
} else {
$data = [
'menuPleaseChoose' => 'Please Choose from the options',
'menuOptionViewTour' => 'View Tour',
'backToMap' => 'Back To Map'
];
$this->view('pages/tour', $data);
}
}
you can create a function which will be called on click & pass image url into this as parameter
<a href="javascript:void(0)" onclick="openImage(<image_url>)"></a>
<iframe id="iframeId"></iframe>
<script>
function openImage(url){
$("#iframeId").attr("src", $(this).attr("href"));
}
</script>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.