0
Hereはテストサイトです。Javascriptでdivの幅を動的に変更する
JavascriptのonClickイベント関数を使用して、表示されているフルサイズの画像のsrcを動的に変更しています。しかし、これはイメージを含むdivの幅を変更する際に同じように動作しません。私は関数が実際に与えられた幅を取得していることをテストしたので、おそらくちょうど私のdivの幅の値を正しく定義していないでしょう。
<?php
$username = $_GET['username'];
session_start();
$_SESSION['username'] = $username;
//Database Information
$dbhost = "";
$dbname = "";
$dbuser = "";
$dbpass = "";
//Connect to database
mysql_connect ($dbhost, $dbuser, $dbpass)or die("Could not connect: ".mysql_error());
mysql_select_db($dbname) or die(mysql_error());
//Do the query
$query = mysql_query("SELECT * FROM images ORDER BY idnum DESC LIMIT 5");
//Generate an array of all images
$images = array();
while($image = mysql_fetch_array($query)) {
//this adds each image to the images array
$images[] = $image;
$image['filename'] = $firstimage;
}
?>
<?php
// Beginning attempt at a caption script.
?>
<html>
<head>
<title>Home - Site in Development</title>
<link rel="stylesheet" type="text/css" href="styles.css"/>
<script type="text/javascript">
// Switches the url to view large image.
function switchImageUrl(url, width) {
document.getElementById('img-frame').src = url;
document.GetElementById('center_frame').offsetwidth = width;
}
</script>
</head>
<body onLoad="CalculateAllImageWidthes()">
<div id='account_links'>
<?php
if ($_SESSION['username']) {
echo "Welcome $username!";
} else { ?>
<a href='login.php'>Login</a> | <a href='register.php'>Register</a>
<?php } ?>
</div>
<h1>Picture Captions</h1>
<br/>
<br/>
<div id="left_bar">
Submit a picture <a href="upload.php">here</a>.
<hr/>
<h2>Top Images</h2>
<br/>
<div id="front_pg_images">
<?php foreach($images as $image) { ?>
<a href="#" onClick="switchImageUrl('<?php echo $image['filename']; ?>', '<?php echo $image['width']; ?>')"><img src="<?php echo $image['filename'];?>" width="72px" height="58px" id="front_pg_thumbnail"/></a>
<?php echo $image['name']." - by ".$image['submitter']; ?> <br/>
<br/>
<?php } ?>
</div>
</div>
<div id="center_frame" width="<?php echo $image['width']; ?>">
<img src="<?php echo $image['filename'];?>" name="default" id="img-frame" align="left" valign="top">
</div>
パーフェクト！ありがとうございました！だから私はあなたのような人々をupvoteすることができます:)そしてryanOptini –